diff --git a/content/blog/hello-world/images/flow.svg b/content/blog/hello-world/images/flow.svg
new file mode 100644
index 0000000..1ad5703
--- /dev/null
+++ b/content/blog/hello-world/images/flow.svg
@@ -0,0 +1 @@
+<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 329.33331298828125 739" style="max-width: 100%;" xmlns="http://www.w3.org/2000/svg" width="885px" id="graph-div" height="641px" xmlns:xlink="http://www.w3.org/1999/xlink"><style>@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");'</style><style>#graph-div{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#ccc;}#graph-div .error-icon{fill:#a44141;}#graph-div .error-text{fill:#ddd;stroke:#ddd;}#graph-div .edge-thickness-normal{stroke-width:2px;}#graph-div .edge-thickness-thick{stroke-width:3.5px;}#graph-div .edge-pattern-solid{stroke-dasharray:0;}#graph-div .edge-pattern-dashed{stroke-dasharray:3;}#graph-div .edge-pattern-dotted{stroke-dasharray:2;}#graph-div .marker{fill:lightgrey;stroke:lightgrey;}#graph-div .marker.cross{stroke:lightgrey;}#graph-div svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#graph-div .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#ccc;}#graph-div .cluster-label text{fill:#F9FFFE;}#graph-div .cluster-label span,#graph-div p{color:#F9FFFE;}#graph-div .label text,#graph-div span,#graph-div p{fill:#ccc;color:#ccc;}#graph-div .node rect,#graph-div .node circle,#graph-div .node ellipse,#graph-div .node polygon,#graph-div .node path{fill:#1f2020;stroke:#81B1DB;stroke-width:1px;}#graph-div .flowchart-label text{text-anchor:middle;}#graph-div .node .label{text-align:center;}#graph-div .node.clickable{cursor:pointer;}#graph-div .arrowheadPath{fill:lightgrey;}#graph-div .edgePath .path{stroke:lightgrey;stroke-width:2.0px;}#graph-div .flowchart-link{stroke:lightgrey;fill:none;}#graph-div .edgeLabel{background-color:hsl(0, 0%, 34.4117647059%);text-align:center;}#graph-div .edgeLabel rect{opacity:0.5;background-color:hsl(0, 0%, 34.4117647059%);fill:hsl(0, 0%, 34.4117647059%);}#graph-div .labelBkg{background-color:rgba(87.75, 87.75, 87.75, 0.5);}#graph-div .cluster rect{fill:hsl(180, 1.5873015873%, 28.3529411765%);stroke:rgba(255, 255, 255, 0.25);stroke-width:1px;}#graph-div .cluster text{fill:#F9FFFE;}#graph-div .cluster span,#graph-div p{color:#F9FFFE;}#graph-div div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(20, 1.5873015873%, 12.3529411765%);border:1px solid rgba(255, 255, 255, 0.25);border-radius:2px;pointer-events:none;z-index:100;}#graph-div .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#ccc;}#graph-div :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="10" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-pointEnd"><path style="stroke-width: 1px; stroke-dasharray: 1px, 0px;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="0" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-pointStart"><path style="stroke-width: 1px; stroke-dasharray: 1px, 0px;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleEnd"><circle style="stroke-width: 1px; stroke-dasharray: 1px, 0px;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="flowchart-circleStart"><circle style="stroke-width: 1px; stroke-dasharray: 1px, 0px;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossEnd"><path style="stroke-width: 2px; stroke-dasharray: 1px, 0px;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="flowchart-crossStart"><path style="stroke-width: 2px; stroke-dasharray: 1px, 0px;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path></marker><g class="root"><g class="clusters"><g id="subGraph2" class="cluster default flowchart-label"><rect height="89" width="175.73333740234375" y="634" x="68.79999542236328" ry="0" rx="0" style=""></rect><g transform="translate(103.44999694824219, 634)" class="cluster-label"><foreignObject height="24" width="106.43333435058594"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel">Netlify Hosting</span></div></foreignObject></g></g><g id="subGraph1" class="cluster default flowchart-label"><rect height="267" width="313.3333282470703" y="317" x="0" ry="0" rx="0" style=""></rect><g transform="translate(78.19166564941406, 317)" class="cluster-label"><foreignObject height="24" width="156.9499969482422"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel">Netlify CI/CD Pipeline</span></div></foreignObject></g></g><g id="subGraph0" class="cluster default flowchart-label"><rect height="267" width="204.1666717529297" y="0" x="54.58332824707031" ry="0" rx="0" style=""></rect><g transform="translate(111.875, 0)" class="cluster-label"><foreignObject height="24" width="89.58332824707031"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel">GitHub Repo</span></div></foreignObject></g></g></g><g class="edgePaths"><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-A LE-B" id="L-A-B-0" d="M156.66666412353516,64L156.66666412353516,68.16666666666667C156.66666412353516,72.33333333333333,156.66666412353516,80.66666666666667,156.66666412353516,89C156.66666412353516,97.33333333333333,156.66666412353516,105.66666666666667,156.66666412353516,109.83333333333333L156.66666412353516,114"></path><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-B LE-C" id="L-B-C-0" d="M156.66666412353516,153L156.66666412353516,157.16666666666666C156.66666412353516,161.33333333333334,156.66666412353516,169.66666666666666,156.66666412353516,178C156.66666412353516,186.33333333333334,156.66666412353516,194.66666666666666,156.66666412353516,198.83333333333334L156.66666412353516,203"></path><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-C LE-D" id="L-C-D-0" d="M156.66666412353516,242L156.66666412353516,246.16666666666666C156.66666412353516,250.33333333333334,156.66666412353516,258.6666666666667,156.66666412353516,267C156.66666412353516,275.3333333333333,156.66666412353516,283.6666666666667,156.66666412353516,292C156.66666412353516,300.3333333333333,156.66666412353516,308.6666666666667,156.66666412353516,317C156.66666412353516,325.3333333333333,156.66666412353516,333.6666666666667,156.66666412353516,337.8333333333333L156.66666412353516,342"></path><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-D LE-E" id="L-D-E-0" d="M156.66666412353516,381L156.66666412353516,385.1666666666667C156.66666412353516,389.3333333333333,156.66666412353516,397.6666666666667,156.66666412353516,406C156.66666412353516,414.3333333333333,156.66666412353516,422.6666666666667,156.66666412353516,426.8333333333333L156.66666412353516,431"></path><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-E LE-F" id="L-E-F-0" d="M156.66666412353516,470L156.66666412353516,474.1666666666667C156.66666412353516,478.3333333333333,156.66666412353516,486.6666666666667,156.66666412353516,495C156.66666412353516,503.3333333333333,156.66666412353516,511.6666666666667,156.66666412353516,515.8333333333334L156.66666412353516,520"></path><path marker-end="url(#flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-F LE-G" id="L-F-G-0" d="M156.66666412353516,559L156.66666412353516,563.1666666666666C156.66666412353516,567.3333333333334,156.66666412353516,575.6666666666666,156.66666412353516,584C156.66666412353516,592.3333333333334,156.66666412353516,600.6666666666666,156.66666412353516,609C156.66666412353516,617.3333333333334,156.66666412353516,625.6666666666666,156.66666412353516,634C156.66666412353516,642.3333333333334,156.66666412353516,650.6666666666666,156.66666412353516,654.8333333333334L156.66666412353516,659"></path></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(156.66666412353516, 678.5)" id="flowchart-G-199" class="node default default flowchart-label"><rect height="39" width="105.73333740234375" y="-19.5" x="-52.866668701171875" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-45.366668701171875, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="90.73333740234375"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel">Live Website</span></div></foreignObject></g></g><g transform="translate(156.66666412353516, 361.5)" id="flowchart-D-193" class="node default default flowchart-label"><rect height="39" width="243.3333282470703" y="-19.5" x="-121.66666412353516" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-114.16666412353516, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="228.3333282470703"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel">Trigger CI/CD from main branch</span></div></foreignObject></g></g><g transform="translate(156.66666412353516, 450.5)" id="flowchart-E-195" class="node default default flowchart-label"><rect height="39" width="128.03334045410156" y="-19.5" x="-64.01667022705078" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-56.51667022705078, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="113.03334045410156"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel">Build with Hugo</span></div></foreignObject></g></g><g transform="translate(156.66666412353516, 539.5)" id="flowchart-F-197" class="node default default flowchart-label"><rect height="39" width="136.60000610351562" y="-19.5" x="-68.30000305175781" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-60.80000305175781, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="121.60000610351562"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel">Deploy to Netlify</span></div></foreignObject></g></g><g transform="translate(156.66666412353516, 133.5)" id="flowchart-B-189" class="node default default flowchart-label"><rect height="39" width="134.1666717529297" y="-19.5" x="-67.08333587646484" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-59.583335876464844, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="119.16667175292969"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel">Commit Changes</span></div></foreignObject></g></g><g transform="translate(156.66666412353516, 44.5)" id="flowchart-A-188" class="node default default flowchart-label"><rect height="39" width="112.30000305175781" y="-19.5" x="-56.150001525878906" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-48.650001525878906, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="97.30000305175781"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel">Website Code</span></div></foreignObject></g></g><g transform="translate(156.66666412353516, 222.5)" id="flowchart-C-191" class="node default default flowchart-label"><rect height="39" width="107.36666870117188" y="-19.5" x="-53.68333435058594" ry="0" rx="0" style="" class="basic label-container"></rect><g transform="translate(-46.18333435058594, -12)" style="" class="label"><rect></rect><foreignObject height="24" width="92.36666870117188"><div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; white-space: nowrap;"><span class="nodeLabel">Push to Repo</span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/content/blog/hello-world/index.md b/content/blog/hello-world/index.md
index f089ab2..454aad2 100644
--- a/content/blog/hello-world/index.md
+++ b/content/blog/hello-world/index.md
@@ -48,6 +48,10 @@ Previously I had a blog that used Static Site Generator (SSG) which is [Eleventy
 - [Netlify](https://netlify.com) to host this site and for the CI/CD pipeline
 - [GitHub](https://github.com) to host the source code
 
+## Flow
+
+![Flow](images/flow.svg#center "Flow")
+
 ## Why SSG?
 
 I'm using SSG because it's easier to use and it's faster than using CMS (Content Management System) like [WordPress](https://wordpress.com/). I don't need to worry about the server, database, etc. I just need to write the content and the SSG will generate the static site for me.