Update website workflow article (#78)

---------

Co-authored-by: GitHub Actions <[email protected]>

content/_index.md

@@ -18,7 +18,7 @@ Here are the main projects I actively contribute to:
 
 ### Arch Linux
 
-![alt text](images/arch_linux-logo.png "Arch Linux logo")
+![alt text](images/index/arch_linux-logo.png "Arch Linux logo")
 
 [Arch Linux](https://archlinux.org) is a lightweight and flexible Linux distribution that focuses on simplicity, modernity, pragmatism, user centrality and versatility.
 
@@ -32,15 +32,15 @@ Here are the main projects I actively contribute to:
 
 ### Alpine Linux
 
-![alt text](images/alpine_linux-logo.png "Alpine Linux logo")
+![alt text](images/index/alpine_linux-logo.png "Alpine Linux logo")
 
 [Alpine Linux](https://www.alpinelinux.org) is a security-oriented, lightweight Linux distribution based on musl libc and busybox.
 
 - Packaging: I maintain [some packages](https://pkgs.alpinelinux.org/packages?name=&branch=edge&repo=&arch=&maintainer=Robin+Candau) in Alpine's official testing repository and I'm opening (GitLab) issues & merge requests to fix some packaging issues. I am also maintaining [some of Alpine's packaging tooling](https://archlinux.org/packages/?sort=&q=alpine&maintainer=Antiz&flagged=) in Arch Linux repositories.
 
 ### Arch-Update
 
-![alt text](images/arch_update-logo.png "Arch-Update logo")
+![alt text](images/index/arch_update-logo.png "Arch-Update logo")
 
 [Arch-Update](https://github.com/Antiz96/arch-update) is an update notifier & applier for Arch Linux that assists you with important pre / post update tasks.
 

content/blog/website-workflow.md

@@ -4,50 +4,52 @@ date: 2023-07-24T13:20:26+02:00
 draft: false
 ---
 
-EDIT: This article is slitghly outdated as the workflow I use to maintain this website has evolved and improved over time. I'll eventually write a V2 of that article at some point.
-
 ## The website
 
 This website is built with the [HUGO](https://gohugo.io/) static website generator using the [anatole](https://github.com/lxndrblz/anatole) theme.  
 The website's source code is hosted in [this GitHub repository](https://github.com/Antiz96/antiz.fr/).
 
-## Automated workflow
+## Automated CI / CD workflow
+
+Every changes I make (e.g. creating a new article, update the theme, add new parameters to the website, ...) are done in my local git repository on the [`dev` branch](https://github.com/Antiz96/antiz.fr/tree/dev).  
+Once the changes are pushed to GitHub, I create a pull request from the `dev` branch to the main branch, which triggers CI / CD pipelines (running on my own self-hosted runners):
 
-To manage this website, I use an automated CI / CD workflow:
+![alt_text](../../images/website-workflow/CI_CD_Jobs.png "Website Workflow - CI_CD Jobs")
 
 ### CI
 
-I make my changes *(creating an new article, update the theme, add new parameters to the website, etc...)* locally on my computer inside the git repository in the dev branch.  
-Once the changes are done, I push them to the GitHub repository and I create a pull request from the dev branch to the main one, which triggers a CI pipeline:
+The [CI pipeline](https://github.com/Antiz96/antiz.fr/blob/main/.github/workflows/CI.yml) has one "Test" stage which, as the name implies, runs a bunch of tests (e.g. spellcheckers & linters):
 
-![alt_text](../../images/Website_GitHub_MR_CI.png "Website - Merge Request CI Pipeline")
+![alt_text](../../images/website-workflow/CI_Job.png "Website Workflow - CI Job")
 
-This CI pipeline is divided into two jobs:
+![alt_text](../../images/website-workflow/CI_Job_Test_Stage_Steps.png "Website Workflow - CI Job Test Stage Steps")
 
-![alt_text](../../images/Website_GitHub_CI_Jobs.png "Website - Merge Request CI Jobs")
+### CD
 
-- The build job:
+The [CD pipeline](https://github.com/Antiz96/antiz.fr/blob/main/.github/workflows/CD.yml) has two stages:
 
-The [build job](https://github.com/Antiz96/antiz.fr/blob/main/.github/workflows/CD.yml) automatically builds the website against the new changes I made and, if the build succeeds, it automatically pushes the built website to the dev branch (and thus, add it to the current merge request).
+![alt_text](../../images/website-workflow/CD_Job.png "Website Workflow - CD Job")
 
-- The test job:
+- The "Build" stage:
 
-The [test job](https://github.com/Antiz96/antiz.fr/blob/main/.github/workflows/CI.yml) automatically runs a bunch of tests / linters against the website's files in the repository, to make sure the changes I made are correctly written / syntaxed.
+The "Build" stage builds the website via `hugo` and then commits the built changes to my repository (still on the `dev` branch).
 
-### CD
+![alt_text](../../images/website-workflow/CD_Job_Build_Stage_Steps.png "Website Workflow - CD Job Build Stage Steps")
+
+- The "Deploy" stage:
 
-Once both of the above CI jobs succeeded (meaning the website has been successfully built, pushed to the dev branch of the repository, and the tests went through without any error), I launch a job on my [Jenkins](https://www.jenkins.io/) server targeting the dev environment *(edit: the trigger of that job is now automated via GitHub actions as well):
+Once the "Build" stage has finished successfully, the "Deploy" stage is triggered.
 
-![alt_text](../../images/Jenkins_Update_Website_Job_Dev.png "Jenkins - Update Website Job Dev")
+![alt_text](../../images/website-workflow/CD_Job_Deploy_Stage_Steps.png "Website Workflow - CD Job Deploy Stage Steps")
 
-This Jenkins job runs a simple [Ansible](https://www.ansible.com/) playbook (see that playbook [here](https://github.com/Antiz96/Linux-Server/blob/main/Ansible-Playbooks/roles/update_antiz.fr/tasks/main.yml)) that aims to update the website's sources on the targeted environment against the related GitHub branch (dev branch --> development environment, main branch --> production environment):
+It allows to automatically deploy the website by remotely triggering the dedicated related job on my [Jenkins](https://www.jenkins.io/) server. This Jenkins job can either target my `dev` or `prod` environment for the deployment (the former being hosted on a virtual server in my homelab, the latter being hosted on a VPS), thanks to a dedicated parameter.
 
-![alt_text](../../images/Jenkins_Update_Website_Job_Param.png "Jenkins - Update Website Job Parameters")
+![alt_text](../../images/website-workflow/Jenkins_Job_Parameters.png "Website Workflow - Jenkins Job Parameters")
 
-I can then review what my changes on my development environment.
+Under the hood, this Jenkins job runs a simple [Ansible](https://www.ansible.com/) playbook (see that playbook [here](https://github.com/Antiz96/Linux-Server/blob/main/Ansible-Playbooks/roles/update_antiz.fr/tasks/main.yml)) that aims to update the website's sources on the targeted environment against the related GitHub branch (`dev` branch --> development environment, `main` branch --> production environment).
 
-Once the changes have been reviewed and declared "ready" to go to production, the only thing I need to do is to merge the changes to the main branch on the GitHub repository and relaunch my Jenkins job, targeting the "prod" environment this time, so the changes are pushed against the main branch to the VPS which hosts this website:
+When opening a pull request from the `dev` branch to the `main` branch on the GitHub side, the "Deploy" stage of the "CD" pipeline remotely triggers the Jenkins job targeting the `dev` environment. My changes are thus automatically deployed and I can review them on my development environment.
 
-![alt_text](../../images/Jenkins_Update_Website_Job_Prd.png "Jenkins - Update Website Job Prod")
+Once I reviewed the changes on my development environment and they are ready to go to production, I can just merge the pull request to the `main` branch which will [trigger a new run of the "CD" pipeline](https://github.com/Antiz96/antiz.fr/blob/main/.github/workflows/CD.yml#L4-L6) with the "Deploy" stage targeting the `prod` environment this time!
 
-This workflow aims to evolve and be improved over time but it's a good example of a simple; yet effective, flexible and reliable automated CI / CD workflow you can use to manage your projects! :smile:
+This workflow may evolve and be improved over time but it's a good example of a simple; yet effective, flexible and reliable automated CI / CD workflow you can use to manage your projects! :smile:

public/blog/index.html

@@ -387,10 +387,12 @@
           <div class="post__content">
             <a class="" href="/blog/website-workflow/" title="The automated workflow I use to manage this website"><h3>The automated workflow I use to manage this website</h3></a>
             <div class="post__footer">24 July 2023</div>
-            <p><p>EDIT: This article is slitghly outdated as the workflow I use to maintain this website has evolved and improved over time. I&rsquo;ll eventually write a V2 of that article at some point.</p>
-<h2 id="the-website">The website</h2>
+            <p><h2 id="the-website">The website</h2>
 <p>This website is built with the <a href="https://gohugo.io/">HUGO</a> static website generator using the <a href="https://github.com/lxndrblz/anatole">anatole</a> theme.<br>
-The website&rsquo;s source code is hosted in <a href="https://github.com/Antiz96/antiz.fr/">this GitHub repository</a>.</p></p>
+The website&rsquo;s source code is hosted in <a href="https://github.com/Antiz96/antiz.fr/">this GitHub repository</a>.</p>
+<h2 id="automated-ci--cd-workflow">Automated CI / CD workflow</h2>
+<p>Every changes I make (e.g. creating a new article, update the theme, add new parameters to the website, &hellip;) are done in my local git repository on the <a href="https://github.com/Antiz96/antiz.fr/tree/dev"><code>dev</code> branch</a>.<br>
+Once the changes are pushed to GitHub, I create a pull request from the <code>dev</code> branch to the main branch, which triggers CI / CD pipelines (running on my own self-hosted runners):</p></p>
             <p>[...]</p>
             <a class="custom-readmore" href="/blog/website-workflow/" title="The automated workflow I use to manage this website">Read More</a>
           </div>

public/blog/index.xml

@@ -55,10 +55,12 @@ After a quick thought, I understood that a power outage occurred during the nigh
 
       <guid>https://antiz.fr/blog/website-workflow/</guid>
 
-        <description>&lt;p&gt;EDIT: This article is slitghly outdated as the workflow I use to maintain this website has evolved and improved over time. I&amp;rsquo;ll eventually write a V2 of that article at some point.&lt;/p&gt;
-&lt;h2 id=&#34;the-website&#34;&gt;The website&lt;/h2&gt;
+        <description>&lt;h2 id=&#34;the-website&#34;&gt;The website&lt;/h2&gt;
 &lt;p&gt;This website is built with the &lt;a href=&#34;https://gohugo.io/&#34;&gt;HUGO&lt;/a&gt; static website generator using the &lt;a href=&#34;https://github.com/lxndrblz/anatole&#34;&gt;anatole&lt;/a&gt; theme.&lt;br&gt;
-The website&amp;rsquo;s source code is hosted in &lt;a href=&#34;https://github.com/Antiz96/antiz.fr/&#34;&gt;this GitHub repository&lt;/a&gt;.&lt;/p&gt;</description>
+The website&amp;rsquo;s source code is hosted in &lt;a href=&#34;https://github.com/Antiz96/antiz.fr/&#34;&gt;this GitHub repository&lt;/a&gt;.&lt;/p&gt;
+&lt;h2 id=&#34;automated-ci--cd-workflow&#34;&gt;Automated CI / CD workflow&lt;/h2&gt;
+&lt;p&gt;Every changes I make (e.g. creating a new article, update the theme, add new parameters to the website, &amp;hellip;) are done in my local git repository on the &lt;a href=&#34;https://github.com/Antiz96/antiz.fr/tree/dev&#34;&gt;&lt;code&gt;dev&lt;/code&gt; branch&lt;/a&gt;.&lt;br&gt;
+Once the changes are pushed to GitHub, I create a pull request from the &lt;code&gt;dev&lt;/code&gt; branch to the main branch, which triggers CI / CD pipelines (running on my own self-hosted runners):&lt;/p&gt;</description>
 
     </item>