05-17-2023, 08:16 AM
How I Designed a Personal Portfolio Website with Django (Part 3)
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{"align":"left","id":"1364891","slug":"default","valign":"top","ignore":"","reference":"auto","class":"","count":"0","legendonly":"","readonly":"","score":"0","starsonly":"","best":"5","gap":"5","greet":"Rate this post","legend":"0\/5 - (0 votes)","size":"24","title":"How I Designed a Personal Portfolio Website with Django (Part 3)","width":"0","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}'>
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 0px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> <span class="kksr-muted">Rate this post</span> </div>
</p></div>
<p>This is the final part of the project tutorial series in which we are learning how to design a personal portfolio website. In the <a rel="noreferrer noopener" href="https://blog.finxter.com/how-i-designed-a-personal-portfolio-website-with-django/" data-type="post" data-id="1332381" target="_blank">first</a> and <a href="https://blog.finxter.com/how-i-designed-a-personal-portfolio-website-with-django-part-2/" data-type="post" data-id="1332450" target="_blank" rel="noreferrer noopener">second</a> part series, we designed the application and have it running on the local server.</p>
<p><strong>In this final part, we want to move the application to a production server where anyone with the link can see the website and its content.</strong> This allows us to share what we have done with others including potential employers.</p>
<p class="has-global-color-8-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4a1.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Live Demo</strong>: You can see my portfolio app live here: <a rel="noreferrer noopener" href="http://jonaben.pythonanywhere.com/" target="_blank">http://jonaben.pythonanywhere.com/</a></p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="678" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-236-1024x678.png" alt="" class="wp-image-1364918" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-236-1024x678.png 1024w, https://blog.finxter.com/wp-content/uplo...00x199.png 300w, https://blog.finxter.com/wp-content/uplo...68x508.png 768w, https://blog.finxter.com/wp-content/uplo...ge-236.png 1360w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Deploying Django projects to a live server is not as easy as it is on a local server. Several configurations need to be done. Each hosting platform has its own rules and protocols that need to be observed. </p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="565" height="343" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-237.png" alt="" class="wp-image-1364919" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-237.png 565w, https://blog.finxter.com/wp-content/uplo...00x182.png 300w" sizes="(max-width: 565px) 100vw, 565px" /></figure>
</div>
<p>We will deploy our portfolio website on PythonAnywhere for the following reasons:</p>
<p><strong>Reason 1: It is the easiest way to make our website live.</strong></p>
<p>The first point is the main reason I chose PythonAnywhere. I like to keep things simple. Be warned! Hardly will you use Django without dealing with things more complicated than deploying a website. So, expect the worse while you hope for the best.</p>
<p><strong>Reason 2: We can host our website for free.</strong></p>
<p>The second reason is more or less a choice depending on the nature of the website. There are many hosting platforms like Amazon Cloud Services, Google Cloud, and Microsoft Azure but they offer free services for a limited time. Heroku would have been my first choice but they have suspended their free plan.</p>
<h2 class="wp-block-heading">Steps to Deploy on PythonAnywhere</h2>
<p>We will follow a series of steps to deploy our portfolio website on PythonAnywhere. Ensure you have completed the previous parts and that it’s working in the local server before you attempt this final part.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="660" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-235-1024x660.png" alt="" class="wp-image-1364916" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-235-1024x660.png 1024w, https://blog.finxter.com/wp-content/uplo...00x193.png 300w, https://blog.finxter.com/wp-content/uplo...68x495.png 768w, https://blog.finxter.com/wp-content/uplo...ge-235.png 1345w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<h3 class="wp-block-heading">Step 1: Uploading files to GitHub</h3>
<p>You can skip this part if you already know how to upload files to GitHub. </p>
<p>Uploading files to GitHub is very simple. You simply go to GitHub.com and register an account if you haven’t already done so. Then you go to <em>github.com/new</em> to create a new repository.</p>
<p>On the page you are redirected to after creating a new repo, you will see instructions on how to set up GitHub starting with running <code>git init</code> on the command line.</p>
<p>But I want to show you my preferred way of pushing files to GitHub. </p>
<p>Run the following on your terminal assuming you are using Ubuntu and have git installed:</p>
<ol type="1">
<li><code>git clone <a href="https://github.com/Jonaben1/portfolio_website/">https://github.com/Jonaben1/portfolio_website/</a></code></li>
<li><code>cd portfolio_website</code></li>
<li><code>mv ~/django_projects/portfolio_website/* .</code></li>
<li><code>git add .</code></li>
<li><code>git commit -m 'initial commit</code>‘</li>
<li><code>git push</code></li>
</ol>
<p>By following the above steps, your files will be uploaded to GitHub. Now, let me explain what I just did.</p>
<p>I clone the repo in my home directory and <code>cd</code> into it. My username is <code>Jonaben1</code> and <code>portfolio_website</code> is the name of the Git repository. Make sure you adjust the URL to correspond to yours. Then, I move all files from <code>portfolio_website</code> folder to my current folder which also bears the same name.</p>
<p>Recall, in the <a href="https://blog.finxter.com/how-i-designed-a-personal-portfolio-website-with-django/" data-type="post" data-id="1332381" target="_blank" rel="noreferrer noopener">first part of this series</a>, we created a folder named <code>portfolio_website</code>. I like the idea of keeping all Django projects in one folder named <code>django_projects</code>. So, inside this folder, I created the <code>portfolio_website</code> folder. Doing this prevents conflict when I clone the repo.</p>
<p>The next command moves all the files (represented by <code>*</code>) to the current folder (represented by the dot). The <code>~</code> means the home directory. For further assistance, you may wish to check the internet. Now that our files are pushed to GitHub, we can go to the next step.</p>
<h3 class="wp-block-heading">Step 2: Create an account on PythonAnywhere</h3>
<p>Click <a href="https://www.pythonanywhere.com/registration/register/beginner/" data-type="URL" data-id="https://www.pythonanywhere.com/registration/register/beginner/" target="_blank" rel="noreferrer noopener">here</a><sup> </sup>to register an account on the platform. After registration, you log in and be taken to your dashboard as shown below.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="725" height="371" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-227.png" alt="" class="wp-image-1364899" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-227.png 725w, https://blog.finxter.com/wp-content/uplo...00x154.png 300w" sizes="(max-width: 725px) 100vw, 725px" /></figure>
</div>
<p>Open the bash console and clone your GitHub repo:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">git clone https://github.com/Jonaben1/portfolio_website/</pre>
<p>Create and activate a virtual environment</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">python3 -venv venv
source venv/bin/activate
</pre>
<p>Change into your project folder</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">cd portfolio_website</pre>
<p>Install Django and its dependencies using the <code>requirements.txt</code> file.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">pip install -r requirements.txt</pre>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="726" height="374" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-228.png" alt="" class="wp-image-1364900" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-228.png 726w, https://blog.finxter.com/wp-content/uplo...00x155.png 300w" sizes="(max-width: 726px) 100vw, 726px" /></figure>
</div>
<p>Go back to your dashboard, and click on Web to add a new app.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="726" height="372" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-229.png" alt="" class="wp-image-1364901" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-229.png 726w, https://blog.finxter.com/wp-content/uplo...00x154.png 300w" sizes="(max-width: 726px) 100vw, 726px" /></figure>
</div>
<p>Select Django as the web framework. Then select the latest <a href="https://blog.finxter.com/how-to-check-your-python-version/" data-type="post" data-id="1371" target="_blank" rel="noreferrer noopener">Python version</a> (v3.9). Click <code>Next</code>. </p>
<p>Some do recommend setting the app with manual configuration. Well, the choice is yours. Once you arrive at the page, as shown in the image below, you have almost completed the setup.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="726" height="370" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-230.png" alt="" class="wp-image-1364905" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-230.png 726w, https://blog.finxter.com/wp-content/uplo...00x153.png 300w" sizes="(max-width: 726px) 100vw, 726px" /></figure>
</div>
<p>Hoping that you are still on that page, scroll down to the Code section, you will see ‘<strong>WSGI configuration file</strong>,’ click on the link, and you will be taken to an editor. Note that this WSGI file is not the same as the one in your Django project files.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="725" height="371" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-231.png" alt="" class="wp-image-1364907" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-231.png 725w, https://blog.finxter.com/wp-content/uplo...00x154.png 300w" sizes="(max-width: 725px) 100vw, 725px" /></figure>
</div>
<p>Edit linee 12 and 17. Make it look like this:</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="725" height="408" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-232.png" alt="" class="wp-image-1364908" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-232.png 725w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 725px) 100vw, 725px" /></figure>
</div>
<p>Hit save and go back to the Web section. Edit the source code as shown in the image below. In the virtualenv section, enter the whole path of your virtualenv name. Mine is <code>/home/Jonaben/venv</code></p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="725" height="408" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-233.png" alt="" class="wp-image-1364910" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-233.png 725w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 725px) 100vw, 725px" /></figure>
</div>
<p>Go back to the bash console. Open your <code>settings.py</code> file and save your domain name to the <code>ALLOWED_HOST</code> variable. Mine is <code>jonaben.pythonanywhere.com</code>. Hopefully, everything is all set.</p>
<p>Reload your web app to apply all the changes made. Enter your domain name to the web address in your browser. Your app is now live!</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="725" height="408" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-234.png" alt="" class="wp-image-1364913" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-234.png 725w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 725px) 100vw, 725px" /></figure>
</div>
<h2 class="wp-block-heading">Conclusion</h2>
<p>We have successfully come to the end of this project series. </p>
<p>From creating a Django app to deploying to a local server, to uploading files to GitHub, and now, deploying to a production server. No doubt, you have learned a lot. You can now create similar Django project and deploy it instantly to PythonAnywhere.</p>
<p>If you want to make changes to your app, how can you do so? </p>
<p>Quite easy. Either you do it locally, push to GitHub and pull the changes from the bash console or you make the changes directly in the bash console. It all depends on what changes you are making.</p>
<p>For example, you will notice that I applied the changes in the <code>ALLOWED_HOST</code> variable in the <code>settings.py</code> file directly rather than pulling from GitHub. This is in case I decide to host my application using other hosting platforms.</p>
<p>Remember, you need to log in to your account at least once every 3 months if you want your app to remain live. Happy coding!</p>
<p class="has-base-2-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4a1.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended</strong>: <a href="https://blog.finxter.com/dash-flask/" data-type="post" data-id="5460" target="_blank" rel="noreferrer noopener">[Dash + Flask] How to Deploy a Python Dash App on Pythonanywhere.com</a></p>
</div>
https://www.sickgaming.net/blog/2023/05/...go-part-3/
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{"align":"left","id":"1364891","slug":"default","valign":"top","ignore":"","reference":"auto","class":"","count":"0","legendonly":"","readonly":"","score":"0","starsonly":"","best":"5","gap":"5","greet":"Rate this post","legend":"0\/5 - (0 votes)","size":"24","title":"How I Designed a Personal Portfolio Website with Django (Part 3)","width":"0","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}'>
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 0px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> <span class="kksr-muted">Rate this post</span> </div>
</p></div>
<p>This is the final part of the project tutorial series in which we are learning how to design a personal portfolio website. In the <a rel="noreferrer noopener" href="https://blog.finxter.com/how-i-designed-a-personal-portfolio-website-with-django/" data-type="post" data-id="1332381" target="_blank">first</a> and <a href="https://blog.finxter.com/how-i-designed-a-personal-portfolio-website-with-django-part-2/" data-type="post" data-id="1332450" target="_blank" rel="noreferrer noopener">second</a> part series, we designed the application and have it running on the local server.</p>
<p><strong>In this final part, we want to move the application to a production server where anyone with the link can see the website and its content.</strong> This allows us to share what we have done with others including potential employers.</p>
<p class="has-global-color-8-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4a1.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Live Demo</strong>: You can see my portfolio app live here: <a rel="noreferrer noopener" href="http://jonaben.pythonanywhere.com/" target="_blank">http://jonaben.pythonanywhere.com/</a></p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="678" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-236-1024x678.png" alt="" class="wp-image-1364918" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-236-1024x678.png 1024w, https://blog.finxter.com/wp-content/uplo...00x199.png 300w, https://blog.finxter.com/wp-content/uplo...68x508.png 768w, https://blog.finxter.com/wp-content/uplo...ge-236.png 1360w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Deploying Django projects to a live server is not as easy as it is on a local server. Several configurations need to be done. Each hosting platform has its own rules and protocols that need to be observed. </p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="565" height="343" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-237.png" alt="" class="wp-image-1364919" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-237.png 565w, https://blog.finxter.com/wp-content/uplo...00x182.png 300w" sizes="(max-width: 565px) 100vw, 565px" /></figure>
</div>
<p>We will deploy our portfolio website on PythonAnywhere for the following reasons:</p>
<p><strong>Reason 1: It is the easiest way to make our website live.</strong></p>
<p>The first point is the main reason I chose PythonAnywhere. I like to keep things simple. Be warned! Hardly will you use Django without dealing with things more complicated than deploying a website. So, expect the worse while you hope for the best.</p>
<p><strong>Reason 2: We can host our website for free.</strong></p>
<p>The second reason is more or less a choice depending on the nature of the website. There are many hosting platforms like Amazon Cloud Services, Google Cloud, and Microsoft Azure but they offer free services for a limited time. Heroku would have been my first choice but they have suspended their free plan.</p>
<h2 class="wp-block-heading">Steps to Deploy on PythonAnywhere</h2>
<p>We will follow a series of steps to deploy our portfolio website on PythonAnywhere. Ensure you have completed the previous parts and that it’s working in the local server before you attempt this final part.</p>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="660" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-235-1024x660.png" alt="" class="wp-image-1364916" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-235-1024x660.png 1024w, https://blog.finxter.com/wp-content/uplo...00x193.png 300w, https://blog.finxter.com/wp-content/uplo...68x495.png 768w, https://blog.finxter.com/wp-content/uplo...ge-235.png 1345w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<h3 class="wp-block-heading">Step 1: Uploading files to GitHub</h3>
<p>You can skip this part if you already know how to upload files to GitHub. </p>
<p>Uploading files to GitHub is very simple. You simply go to GitHub.com and register an account if you haven’t already done so. Then you go to <em>github.com/new</em> to create a new repository.</p>
<p>On the page you are redirected to after creating a new repo, you will see instructions on how to set up GitHub starting with running <code>git init</code> on the command line.</p>
<p>But I want to show you my preferred way of pushing files to GitHub. </p>
<p>Run the following on your terminal assuming you are using Ubuntu and have git installed:</p>
<ol type="1">
<li><code>git clone <a href="https://github.com/Jonaben1/portfolio_website/">https://github.com/Jonaben1/portfolio_website/</a></code></li>
<li><code>cd portfolio_website</code></li>
<li><code>mv ~/django_projects/portfolio_website/* .</code></li>
<li><code>git add .</code></li>
<li><code>git commit -m 'initial commit</code>‘</li>
<li><code>git push</code></li>
</ol>
<p>By following the above steps, your files will be uploaded to GitHub. Now, let me explain what I just did.</p>
<p>I clone the repo in my home directory and <code>cd</code> into it. My username is <code>Jonaben1</code> and <code>portfolio_website</code> is the name of the Git repository. Make sure you adjust the URL to correspond to yours. Then, I move all files from <code>portfolio_website</code> folder to my current folder which also bears the same name.</p>
<p>Recall, in the <a href="https://blog.finxter.com/how-i-designed-a-personal-portfolio-website-with-django/" data-type="post" data-id="1332381" target="_blank" rel="noreferrer noopener">first part of this series</a>, we created a folder named <code>portfolio_website</code>. I like the idea of keeping all Django projects in one folder named <code>django_projects</code>. So, inside this folder, I created the <code>portfolio_website</code> folder. Doing this prevents conflict when I clone the repo.</p>
<p>The next command moves all the files (represented by <code>*</code>) to the current folder (represented by the dot). The <code>~</code> means the home directory. For further assistance, you may wish to check the internet. Now that our files are pushed to GitHub, we can go to the next step.</p>
<h3 class="wp-block-heading">Step 2: Create an account on PythonAnywhere</h3>
<p>Click <a href="https://www.pythonanywhere.com/registration/register/beginner/" data-type="URL" data-id="https://www.pythonanywhere.com/registration/register/beginner/" target="_blank" rel="noreferrer noopener">here</a><sup> </sup>to register an account on the platform. After registration, you log in and be taken to your dashboard as shown below.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="725" height="371" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-227.png" alt="" class="wp-image-1364899" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-227.png 725w, https://blog.finxter.com/wp-content/uplo...00x154.png 300w" sizes="(max-width: 725px) 100vw, 725px" /></figure>
</div>
<p>Open the bash console and clone your GitHub repo:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">git clone https://github.com/Jonaben1/portfolio_website/</pre>
<p>Create and activate a virtual environment</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">python3 -venv venv
source venv/bin/activate
</pre>
<p>Change into your project folder</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">cd portfolio_website</pre>
<p>Install Django and its dependencies using the <code>requirements.txt</code> file.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">pip install -r requirements.txt</pre>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="726" height="374" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-228.png" alt="" class="wp-image-1364900" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-228.png 726w, https://blog.finxter.com/wp-content/uplo...00x155.png 300w" sizes="(max-width: 726px) 100vw, 726px" /></figure>
</div>
<p>Go back to your dashboard, and click on Web to add a new app.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="726" height="372" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-229.png" alt="" class="wp-image-1364901" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-229.png 726w, https://blog.finxter.com/wp-content/uplo...00x154.png 300w" sizes="(max-width: 726px) 100vw, 726px" /></figure>
</div>
<p>Select Django as the web framework. Then select the latest <a href="https://blog.finxter.com/how-to-check-your-python-version/" data-type="post" data-id="1371" target="_blank" rel="noreferrer noopener">Python version</a> (v3.9). Click <code>Next</code>. </p>
<p>Some do recommend setting the app with manual configuration. Well, the choice is yours. Once you arrive at the page, as shown in the image below, you have almost completed the setup.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="726" height="370" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-230.png" alt="" class="wp-image-1364905" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-230.png 726w, https://blog.finxter.com/wp-content/uplo...00x153.png 300w" sizes="(max-width: 726px) 100vw, 726px" /></figure>
</div>
<p>Hoping that you are still on that page, scroll down to the Code section, you will see ‘<strong>WSGI configuration file</strong>,’ click on the link, and you will be taken to an editor. Note that this WSGI file is not the same as the one in your Django project files.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="725" height="371" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-231.png" alt="" class="wp-image-1364907" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-231.png 725w, https://blog.finxter.com/wp-content/uplo...00x154.png 300w" sizes="(max-width: 725px) 100vw, 725px" /></figure>
</div>
<p>Edit linee 12 and 17. Make it look like this:</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="725" height="408" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-232.png" alt="" class="wp-image-1364908" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-232.png 725w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 725px) 100vw, 725px" /></figure>
</div>
<p>Hit save and go back to the Web section. Edit the source code as shown in the image below. In the virtualenv section, enter the whole path of your virtualenv name. Mine is <code>/home/Jonaben/venv</code></p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="725" height="408" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-233.png" alt="" class="wp-image-1364910" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-233.png 725w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 725px) 100vw, 725px" /></figure>
</div>
<p>Go back to the bash console. Open your <code>settings.py</code> file and save your domain name to the <code>ALLOWED_HOST</code> variable. Mine is <code>jonaben.pythonanywhere.com</code>. Hopefully, everything is all set.</p>
<p>Reload your web app to apply all the changes made. Enter your domain name to the web address in your browser. Your app is now live!</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="725" height="408" src="https://blog.finxter.com/wp-content/uploads/2023/05/image-234.png" alt="" class="wp-image-1364913" srcset="https://blog.finxter.com/wp-content/uploads/2023/05/image-234.png 725w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 725px) 100vw, 725px" /></figure>
</div>
<h2 class="wp-block-heading">Conclusion</h2>
<p>We have successfully come to the end of this project series. </p>
<p>From creating a Django app to deploying to a local server, to uploading files to GitHub, and now, deploying to a production server. No doubt, you have learned a lot. You can now create similar Django project and deploy it instantly to PythonAnywhere.</p>
<p>If you want to make changes to your app, how can you do so? </p>
<p>Quite easy. Either you do it locally, push to GitHub and pull the changes from the bash console or you make the changes directly in the bash console. It all depends on what changes you are making.</p>
<p>For example, you will notice that I applied the changes in the <code>ALLOWED_HOST</code> variable in the <code>settings.py</code> file directly rather than pulling from GitHub. This is in case I decide to host my application using other hosting platforms.</p>
<p>Remember, you need to log in to your account at least once every 3 months if you want your app to remain live. Happy coding!</p>
<p class="has-base-2-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4a1.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended</strong>: <a href="https://blog.finxter.com/dash-flask/" data-type="post" data-id="5460" target="_blank" rel="noreferrer noopener">[Dash + Flask] How to Deploy a Python Dash App on Pythonanywhere.com</a></p>
</div>
https://www.sickgaming.net/blog/2023/05/...go-part-3/