-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
225 lines (143 loc) · 15.5 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
<title type="text">Hemendra</title>
<subtitle type="html">MemE is a powerful and highly customizable GoHugo theme for personal blogs.</subtitle>
<updated>2020-08-30T17:10:25+05:30</updated>
<id>https://www.hemc4.com/</id>
<link rel="alternate" type="text/html" href="https://www.hemc4.com/" />
<link rel="self" type="application/atom+xml" href="https://www.hemc4.com/atom.xml" />
<author>
<name>Hemendra</name>
<uri>https://www.hemc4.com/</uri>
<email>[email protected]</email>
</author>
<rights>[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en)</rights>
<generator uri="https://gohugo.io/" version="0.62.2">Hugo</generator>
<entry>
<title type="text">Hosting Hugo Blog on Github Pages</title>
<link rel="alternate" type="text/html" href="https://www.hemc4.com/posts/hosting-hugo-blog-on-github-pages/" />
<id>https://www.hemc4.com/posts/hosting-hugo-blog-on-github-pages/</id>
<updated>2020-08-30T17:10:15+05:30</updated>
<published>2020-08-16T12:01:05+05:30</published>
<author>
<name>Hemendra</name>
<uri>https://www.hemc4.com/</uri>
<email>[email protected]</email>
</author>
<rights>[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en)</rights><summary type="html">I have wrote about my previous setup for Hugo blog here that was using the AWS S3 bucket and CloudFront as static site. Although it is decent setup, there are some complexities that can be simplified.
First, that setup will cost you the S3 bandwidth charges.</summary>
<content type="html"><p>I have wrote about my previous setup for Hugo blog <a href="https://www.hemc4.com/posts/hugo-blog/">here</a> that was using the AWS S3 bucket and CloudFront as static site. Although it is decent setup, there are some complexities that can be simplified.</p>
<ul>
<li>First, that setup will cost you the S3 bandwidth charges. Storage charges are not much because of the small size but if traffic on your blog is increasing it will increase the AWS bill.</li>
<li>Deployment is bit complex. If you are not aware how AWS S3 and CloudFront works, you will have a hard fixing/upgrading it.</li>
</ul>
<p>So to solve these problems, I found a better solution, use Github pages to host your blog with a custom domain. Github pages are free and serve the site from the Github repo. This way there is no cost involved for the hosting. Hugo has simple official support documentation to run it on Github pages. Deployment is very simple, just push the changes to the Github repo.</p>
<p>I have dumped the fancy io domain hemc.io to simple .com domain hemc4.com which costs 1/4 of the io domain.</p>
<p>It is better the keep the whole setup simple for maintainability. Simpler the setup, less friction it will generate to do the actual work.</p>
<h3 id="hugo-site-on-github-pages">Hugo Site on Github Pages</h3>
<p>Hugo has <a href="https://gohugo.io/hosting-and-deployment/hosting-on-github/">official documentation</a> for setting up site with Github pages. This is concise and self sufficient for the setup. I just followed the approach with the 2 repos setup.</p>
<ul>
<li>Private repo to Hugo files</li>
<li>Public repo for generated static site files</li>
</ul>
<p>I have slightly modified the script for pushing the changes to private repo.</p>
<script src="https://gist.github.com/hemc4/56e2ec2b69301652241b080dfa150ed9.js"></script>
<p>Internet is full of the more complex setup with Github actions and different CI/CD tools, but I prefer this simple setup for deploy. After every new post creation just run the script.</p>
<p><code>./deploy.sh</code></p>
<h3 id="custom-domain-for-github-pages">Custom domain for Github Pages</h3>
<p>Custom domain setup requires changes on the DNS file of your domain and the Github bucket repo settings.</p>
<h4 id="setting-up-the-domain-dns-entries">Setting up the domain DNS entries</h4>
<p><img src="https://www.hemc4.com/img/godaddy_dns_setup.png" alt="godaddy_dns_setup.png"></p>
<p>Domain requires 4 <code>A</code> entries and 1 <code>CNAME</code> entry in the DNS file.</p>
<h4 id="setting-up-github-repo">Setting up Github repo</h4>
<p><img src="https://www.hemc4.com/img/github_custom_domain.png" alt="github_custom_domain.png"></p>
<p>if you face any problem while setting up custom domain Github has detailed guide <a href="https://docs.github.com/en/github/working-with-github-pages/troubleshooting-custom-domains-and-github-pages">here</a></p>
<hr>
<p><strong>References:</strong></p>
<p><a href="https://gohugo.io/hosting-and-deployment/hosting-on-github/">Hugo official doc for Github pages hosting</a></p>
<p><a href="https://docs.github.com/en/github/working-with-github-pages/configuring-a-custom-domain-for-your-github-pages-site">Github official docs for custom domains</a></p>
<p><a href="https://medium.com/@hossainkhan/using-custom-domain-for-github-pages-86b303d3918a">Setting up a custom domain to point to Github pages</a></p>
<p><a href="https://docs.github.com/en/github/working-with-github-pages/troubleshooting-custom-domains-and-github-pages">Github custom domain troubleshooting</a></p>
</content>
<category scheme="https://www.hemc4.com/categories/development/" term="Development" label="Development" />
<category scheme="https://www.hemc4.com/categories/blog/" term="blog" label="blog" />
<category scheme="https://www.hemc4.com/tags/development/" term="Development" label="Development" />
<category scheme="https://www.hemc4.com/tags/blog/" term="blog" label="blog" />
</entry>
<entry>
<title type="text">Switching to Hugo Blog</title>
<link rel="alternate" type="text/html" href="https://www.hemc4.com/posts/hugo-blog/" />
<id>https://www.hemc4.com/posts/hugo-blog/</id>
<updated>2020-08-30T13:54:39+05:30</updated>
<published>2017-02-11T15:48:36+05:30</published>
<author>
<name>Hemendra</name>
<uri>https://www.hemc4.com/</uri>
<email>[email protected]</email>
</author>
<rights>[CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en)</rights><summary type="html">Update :- This deployment in not in use anymore. check new setup here
For quite a while, I was planning to restart my blog to share my recent adventures and learnings in tech/life but the headache of maintenance and monthly bill to keep running it, leads to keep procrastinating it.</summary>
<content type="html"><blockquote>
<p>Update :- This deployment in not in use anymore. check new setup <a href="https://www.hemc4.com/posts/hosting-hugo-blog-on-github-pages/">here</a></p>
</blockquote>
<p>For quite a while, I was planning to restart my blog to share my recent adventures and learnings in tech/life but the headache of maintenance and monthly bill to keep running it, leads to keep procrastinating it.</p>
<h2 id="why-not-wordpress-">Why not Wordpress ?</h2>
<p>I once started using blogspot during my college days and it was amazing but it didn't work for too long. Although the hosting, custom domain and other things were sorted, the efforts to customize little things annoyed me. Then after some friends recommendations, switched it to popular Wordpress but high server cost,time for maintenance and security issues forced me to look for alternatives.</p>
<blockquote>
<p>A lot of non-programmers, tech-savvy people are using Wordpress and it is really easy to maintain, just install plugin for almost everything you want to do with Wordpress then why it is a maintenance overhead ?</p>
</blockquote>
<p>Every other week I could see some bot scanning the very known Wordpress architecture to figure out loopholes and take it down and I don't want my Wordpress server sending backdoor data or displaying porn ads on my blog. All I needed was simple static blog with the comments on. Medium would have worked fine but I wanted more control on the content.</p>
<h2 id="hugo">Hugo</h2>
<p>While reading some post in Go community I came to know Hugo, a static site generator. The idea of converting the .md docs to blog was really exciting. Those Markdown docs I keep creating during day to day base programming sessions, could be converted to blog post real quick.</p>
<p>After browsing through docs, It appeared very simple, powerful and really fast. I heard <a href="https://twitter.com/spf13">@spf13</a>(Creator of Hugo) mentioning in talk that someone using Hugo to generate 25k static blog posts and it is still fast.</p>
<h3 id="installation"><strong>Installation</strong></h3>
<p>I have installed it on my favorite cloud AWS by simple following steps on this <a href="http://blog.aws.andyfase.com/s3-backed-static-blog/index.html">post</a>. Once this you setup this way there is no need to put the content on server, it just directly serves from s3 using Cloudfront and Route53.</p>
<p>This setup is very cheap and if you are running on AWS free tier then almost free.</p>
<h3 id="customization"><strong>Customization</strong></h3>
<blockquote>
<p>Didn't you just said it is dead simple then why you need to customize it ?</p>
</blockquote>
<p>Hugo comes with it's own command line tools to generate, test and deploy the blog, once you put it with s3 it requires some additional scripts to handle seamless deployment so why not just write some script and bind it to tools you use everyday. I decided to combine it with npm by just adding some custom scripts.</p>
<h3 id="integration-with-npm"><strong>Integration with npm</strong></h3>
<p>Hugo has it's own commands to run and build. In this simple config file, I have created small small scripts to handle these commands on Hugo level.</p>
<script src="https://gist.github.com/hemc4/d03fa9cff790d9c40961c49d79a57342.js"></script>
<p>AWS CLI Integration makes these scripts more powerful to handle build and deployments.</p>
<h3 id="run-local"><strong>Run Local</strong></h3>
<p><code>npm start</code> command is linked to run Hugo server with all the drafts on local machine. Whenever you make any changes to files it reloads the blog in browser.</p>
<h3 id="build"><strong>Build</strong></h3>
<p>During the build, I don't want to reset my git logs as I am maintaining a state of blog on Github, So instead of deleting the whole public folder, only content will be removed not the .git files</p>
<script src="https://gist.github.com/hemc4/625aa141a80a45682f6085e77350f655.js"></script>
<h3 id="deploy">Deploy</h3>
<p>In case of s3 Hugo setup, deployment require these things</p>
<ul>
<li>Sync the local updated files with s3 bucket</li>
<li>Invalidate the Cloudfront cache to serve the fresh posts from s3 bucket</li>
</ul>
<script src="https://gist.github.com/hemc4/c79d163579c9931b6dafb90c92ed1d27.js"></script>
<h4 id="check-deploy-status"><strong>Check Deploy Status</strong></h4>
<blockquote>
<p>Invalidation some times takes a while so how do I know if the cache is clear and the blog serving the updated posts ?</p>
</blockquote>
<p>There might be some better way to solve this problem but I came with a simple script that checks the aws cloufront status from aws-cli and you can check the status of the latest deployment.</p>
<script src="https://gist.github.com/hemc4/1aebc559c599bab7d7336f63b3cc4eed.js"></script>
<p>So you only need few npm commands to publish a blog post.</p>
<pre><code>#run the local server
npm start
# create a new post
hugo new post/first-post.md
# build
npm run-script build
#deploy
npm run-script deploy
#check deploy status
npm run-script deploystatus
</code></pre><hr>
<p>Now it is really easy to add a new post and simply publish it in single command. If you found any other way to simplify , Please put in comments.</p>
<p>Happy Blogging :)</p>
</content>
<category scheme="https://www.hemc4.com/categories/development/" term="Development" label="Development" />
<category scheme="https://www.hemc4.com/categories/blog/" term="blog" label="blog" />
<category scheme="https://www.hemc4.com/tags/development/" term="Development" label="Development" />
<category scheme="https://www.hemc4.com/tags/blog/" term="blog" label="blog" />
</entry>
</feed>