Skip to content

Commit

Permalink
Automated build
Browse files Browse the repository at this point in the history
  • Loading branch information
@actions-user
actions-user committed Nov 15, 2024
1 parent 71c7b03 commit 7cde8cc
Show file tree
Hide file tree
Showing 21 changed files with 58 additions and 43 deletions.
9 changes: 6 additions & 3 deletions public/blog/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -387,10 +387,13 @@
<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>I make my changes <em>(e.g. creating an new article, update the theme, add new parameters to the website, etc&hellip;)</em> locally on my computer inside the git repository in the <code>dev</code> branch.<br>
Every changes I made (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 the above GitHub repository, I create a pull request from the <code>dev</code> branch to the main one, which triggers CI / CD pipelines (which run 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>
Expand Down
9 changes: 6 additions & 3 deletions public/blog/index.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,13 @@ 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;I make my changes &lt;em&gt;(e.g. creating an new article, update the theme, add new parameters to the website, etc&amp;hellip;)&lt;/em&gt; locally on my computer inside the git repository in the &lt;code&gt;dev&lt;/code&gt; branch.&lt;br&gt;
Every changes I made (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 the above GitHub repository, I create a pull request from the &lt;code&gt;dev&lt;/code&gt; branch to the main one, which triggers CI / CD pipelines (which run on my own self-hosted runners):&lt;/p&gt;</description>

</item>

Expand Down
68 changes: 37 additions & 31 deletions public/blog/website-workflow/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,19 +127,23 @@

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="The automated workflow I use to manage this website">
<meta name="twitter:description" content="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 static website generator using the anatole theme.
The website’s source code is hosted in this GitHub repository.">
<meta name="twitter:description" content="The website This website is built with the HUGO static website generator using the anatole theme.
The website’s source code is hosted in this GitHub repository.
Automated CI / CD workflow I make my changes (e.g. 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.
Every changes I made (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.
Once the changes are pushed to the above GitHub repository, I create a pull request from the dev branch to the main one, which triggers CI / CD pipelines (which run on my own self-hosted runners):">




<meta property="og:url" content="https://antiz.fr/blog/website-workflow/">
<meta property="og:site_name" content="Robin Candau">
<meta property="og:title" content="The automated workflow I use to manage this website">
<meta property="og:description" content="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 static website generator using the anatole theme.
The website’s source code is hosted in this GitHub repository.">
<meta property="og:description" content="The website This website is built with the HUGO static website generator using the anatole theme.
The website’s source code is hosted in this GitHub repository.
Automated CI / CD workflow I make my changes (e.g. 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.
Every changes I made (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.
Once the changes are pushed to the above GitHub repository, I create a pull request from the dev branch to the main one, which triggers CI / CD pipelines (which run on my own self-hosted runners):">
<meta property="og:locale" content="en_us">
<meta property="og:type" content="article">
<meta property="article:section" content="blog">
Expand All @@ -162,7 +166,7 @@
"alternativeHeadline": "",
"description": "
\u003cp\u003eEDIT: This article is slitghly outdated as the workflow I use to maintain this website has evolved and improved over time. I\u0026rsquo;ll eventually write a V2 of that article at some point.\u003c\/p\u003e\n\u003ch2 id=\u0022the-website\u0022\u003eThe website\u003c\/h2\u003e\n\u003cp\u003eThis website is built with the \u003ca href=\u0022https:\/\/gohugo.io\/\u0022\u003eHUGO\u003c\/a\u003e static website generator using the \u003ca href=\u0022https:\/\/github.com\/lxndrblz\/anatole\u0022\u003eanatole\u003c\/a\u003e theme.\u003cbr\u003e\nThe website\u0026rsquo;s source code is hosted in \u003ca href=\u0022https:\/\/github.com\/Antiz96\/antiz.fr\/\u0022\u003ethis GitHub repository\u003c\/a\u003e.\u003c\/p\u003e
\u003ch2 id=\u0022the-website\u0022\u003eThe website\u003c\/h2\u003e\n\u003cp\u003eThis website is built with the \u003ca href=\u0022https:\/\/gohugo.io\/\u0022\u003eHUGO\u003c\/a\u003e static website generator using the \u003ca href=\u0022https:\/\/github.com\/lxndrblz\/anatole\u0022\u003eanatole\u003c\/a\u003e theme.\u003cbr\u003e\nThe website\u0026rsquo;s source code is hosted in \u003ca href=\u0022https:\/\/github.com\/Antiz96\/antiz.fr\/\u0022\u003ethis GitHub repository\u003c\/a\u003e.\u003c\/p\u003e\n\u003ch2 id=\u0022automated-ci--cd-workflow\u0022\u003eAutomated CI \/ CD workflow\u003c\/h2\u003e\n\u003cp\u003eI make my changes \u003cem\u003e(e.g. creating an new article, update the theme, add new parameters to the website, etc\u0026hellip;)\u003c\/em\u003e locally on my computer inside the git repository in the \u003ccode\u003edev\u003c\/code\u003e branch.\u003cbr\u003e\nEvery changes I made (e.g. creating a new article, update the theme, add new parameters to the website, \u0026hellip;) are done in my local git repository on the \u003ca href=\u0022https:\/\/github.com\/Antiz96\/antiz.fr\/tree\/dev\u0022\u003e\u003ccode\u003edev\u003c\/code\u003e branch\u003c\/a\u003e.\u003cbr\u003e\nOnce the changes are pushed to the above GitHub repository, I create a pull request from the \u003ccode\u003edev\u003c\/code\u003e branch to the main one, which triggers CI \/ CD pipelines (which run on my own self-hosted runners):\u003c\/p\u003e
Expand Down Expand Up @@ -212,7 +216,7 @@

,
"url" : "https:\/\/antiz.fr\/blog\/website-workflow\/",
"wordCount" : "418",
"wordCount" : "429",
"genre" : [ ],
"keywords" : [ ]
}
Expand Down Expand Up @@ -432,38 +436,40 @@ <h1>The Automated Workflow I Use to Manage This Website</h1>
</li>
<li class="post__meta-item">
<em class="fas fa-stopwatch post__meta-icon"></em>
<span class="post__meta-text">2-minute read</span>
<span class="post__meta-text">3-minute read</span>
</li>
</ul>
<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>
<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>
<h2 id="automated-workflow">Automated workflow</h2>
<p>To manage this website, I use an automated CI / CD workflow:</p>
<h2 id="automated-ci--cd-workflow">Automated CI / CD workflow</h2>
<p>I make my changes <em>(e.g. creating an new article, update the theme, add new parameters to the website, etc&hellip;)</em> locally on my computer inside the git repository in the <code>dev</code> branch.<br>
Every changes I made (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 the above GitHub repository, I create a pull request from the <code>dev</code> branch to the main one, which triggers CI / CD pipelines (which run on my own self-hosted runners):</p>
<p><img src="../../images/website-workflow/CI_CD_Jobs.png" alt="alt_text" title="Website Workflow - CI_CD Jobs"></p>
<h3 id="ci">CI</h3>
<p>I make my changes <em>(creating an new article, update the theme, add new parameters to the website, etc&hellip;)</em> locally on my computer inside the git repository in the dev branch.<br>
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:</p>
<p><img src="../../images/Website_GitHub_MR_CI.png" alt="alt_text" title="Website - Merge Request CI Pipeline"></p>
<p>This CI pipeline is divided into two jobs:</p>
<p><img src="../../images/Website_GitHub_CI_Jobs.png" alt="alt_text" title="Website - Merge Request CI Jobs"></p>
<p>The <a href="https://github.com/Antiz96/antiz.fr/blob/main/.github/workflows/CI.yml">CI pipeline</a> has one &ldquo;Test&rdquo; stage which, as the name implies, runs a bunch of tests (e.g. spellcheckers &amp; linters):</p>
<p><img src="../../images/website-workflow/CI_Job.png" alt="alt_text" title="Website Workflow - CI Job"></p>
<p><img src="../../images/website-workflow/CI_Job_Test_Stage_Steps.png" alt="alt_text" title="Website Workflow - CI Job Test Stage Steps"></p>
<h3 id="cd">CD</h3>
<p>The <a href="https://github.com/Antiz96/antiz.fr/blob/main/.github/workflows/CD.yml">CD pipeline</a> has two stages:</p>
<p><img src="../../images/website-workflow/CD_Job.png" alt="alt_text" title="Website Workflow - CD Job"></p>
<ul>
<li>The build job:</li>
<li>The &ldquo;Build&rdquo; stage:</li>
</ul>
<p>The <a href="https://github.com/Antiz96/antiz.fr/blob/main/.github/workflows/CD.yml">build job</a> 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).</p>
<p>The &ldquo;Build&rdquo; stage builds the website via <code>hugo</code> and then commits the built changes to my repository (still on the <code>dev</code> branch).</p>
<p><img src="../../images/website-workflow/CD_Job_Build_Stage_Steps.png" alt="alt_text" title="Website Workflow - CD Job Build Stage Steps"></p>
<ul>
<li>The test job:</li>
<li>The &ldquo;Deploy&rdquo; stage:</li>
</ul>
<p>The <a href="https://github.com/Antiz96/antiz.fr/blob/main/.github/workflows/CI.yml">test job</a> automatically runs a bunch of tests / linters against the website&rsquo;s files in the repository, to make sure the changes I made are correctly written / syntaxed.</p>
<h3 id="cd">CD</h3>
<p>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 <a href="https://www.jenkins.io/">Jenkins</a> server targeting the dev environment *(edit: the trigger of that job is now automated via GitHub actions as well):</p>
<p><img src="../../images/Jenkins_Update_Website_Job_Dev.png" alt="alt_text" title="Jenkins - Update Website Job Dev"></p>
<p>This Jenkins job runs a simple <a href="https://www.ansible.com/">Ansible</a> playbook (see that playbook <a href="https://github.com/Antiz96/Linux-Server/blob/main/Ansible-Playbooks/roles/update_antiz.fr/tasks/main.yml">here</a>) that aims to update the website&rsquo;s sources on the targeted environment against the related GitHub branch (dev branch &ndash;&gt; development environment, main branch &ndash;&gt; production environment):</p>
<p><img src="../../images/Jenkins_Update_Website_Job_Param.png" alt="alt_text" title="Jenkins - Update Website Job Parameters"></p>
<p>I can then review what my changes on my development environment.</p>
<p>Once the changes have been reviewed and declared &ldquo;ready&rdquo; 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 &ldquo;prod&rdquo; environment this time, so the changes are pushed against the main branch to the VPS which hosts this website:</p>
<p><img src="../../images/Jenkins_Update_Website_Job_Prd.png" alt="alt_text" title="Jenkins - Update Website Job Prod"></p>
<p>This workflow aims to evolve and be improved over time but it&rsquo;s a good example of a simple; yet effective, flexible and reliable automated CI / CD workflow you can use to manage your projects! &#x1f604;</p>
<p>Once the &ldquo;Build&rdquo; stage has finished successfully, the &ldquo;Deploy&rdquo; stage is triggered.</p>
<p><img src="../../images/website-workflow/CD_Job_Deploy_Stage_Steps.png" alt="alt_text" title="Website Workflow - CD Job Deploy Stage Steps"></p>
<p>It allows to automatically deploy the website by remotely triggering the related job on my <a href="https://www.jenkins.io/">Jenkins</a> server for my website deployment. This Jenkins job can either target my <code>dev</code> or <code>prod</code> environment (the former being hosted on a virtual server in my homelab, the latter being hosted on a VPS), thanks to a dedicated parameter.</p>
<p><img src="../../images/website-workflow/Jenkins_Job_Parameters.png" alt="alt_text" title="Website Workflow - Jenkins Job Parameters"></p>
<p>Under the hood, this Jenkins job runs a simple <a href="https://www.ansible.com/">Ansible</a> playbook (see that playbook <a href="https://github.com/Antiz96/Linux-Server/blob/main/Ansible-Playbooks/roles/update_antiz.fr/tasks/main.yml">here</a>) that aims to update the website&rsquo;s sources on the targeted environment against the related GitHub branch (<code>dev</code> branch &ndash;&gt; development environment, <code>main</code> branch &ndash;&gt; production environment).</p>
<p>When opening a pull request from the <code>dev</code> branch to the <code>main</code> branch, the &ldquo;Deploy&rdquo; stage of my GitHub CD pipeline automatically triggers the related Jenkins job (which itself triggers the related Ansible playbook) targeting my <code>dev</code> environment, so my changes gets automatically deployed and I can review them on my development environment.</p>
<p>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 <code>main</code> branch which will <a href="https://github.com/Antiz96/antiz.fr/blob/main/.github/workflows/CD.yml#L4-L6">trigger a new run of the CD pipeline</a> with the &ldquo;Deploy&rdquo; stage targeting the <code>prod</code> environment this time!</p>
<p>This workflow may evolve and be improved over time but it&rsquo;s a good example of a simple; yet effective, flexible and reliable automated CI / CD workflow you can use to manage your projects! &#x1f604;</p>
</div>
<div class="post__footer">

Expand Down
Binary file removed public/images/Jenkins_Update_Website_Job_Dev.png
View file
Binary file not shown.
Binary file removed public/images/Jenkins_Update_Website_Job_Param.png
View file
Binary file not shown.
Binary file removed public/images/Jenkins_Update_Website_Job_Prd.png
View file
Binary file not shown.
Binary file removed public/images/Website_GitHub_CI_Jobs.png
View file
Binary file not shown.
Binary file removed public/images/Website_GitHub_MR_CI.png
View file
Binary file not shown.
0 public/images/alpine_linux-logo.png → public/images/index/alpine_linux-logo.png
View file
File renamed without changes
0 public/images/arch_linux-logo.png → public/images/index/arch_linux-logo.png
View file
File renamed without changes
0 public/images/arch_update-logo.png → public/images/index/arch_update-logo.png
View file
File renamed without changes
Binary file removed public/images/ubuntu_unity-logo.png
View file
Binary file not shown.
Binary file added public/images/website_workflow/CD_Job.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/website_workflow/CD_Job_Build_Stage_Steps.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/website_workflow/CD_Job_Deploy_Stage_Steps.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/website_workflow/CI_CD_Jobs.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/website_workflow/CI_Job.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/website_workflow/CI_Job_Test_Stage_Steps.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/website_workflow/Jenkins_Job_Parameters.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 7cde8cc

Please sign in to comment.