How I setup this blog

Let's start with hugo

Post by Vinh on

I made a WordPress them call Natsume and now I re-used that name for a theme I made for hugo.

The theme focuses on syntax highlight, clean and minimal. In this post, let see how you can get up on hugo with natsume.

Setup Hugo

Step 1. Install Hugo

Being written in Go, it’s very easy to install and run without any dependencies

brew install hugo

Step 2. Create a new site

cd ~/notyim
hugo new site blog

Now this blog sits inside ~/notyim/blog.

Step 3. Writing some basic content

hugo new about.md
hugo new posts/setup.md

Make sure you commit it

Step 4. Pick a theme.

mkdir themes
g submodule add git@github.com:NotyIm/natsume.git themes/natsume

Step 5. Build it

With the content and theme, we can build it

hugo --theme=natsume --buildDrafts

Live reload

hugo server --theme=natsume --buildDrafts --watch

Now whenever a file change, the blog reload itself.

Step 6. Release

Once confirm that the post looks good. Let’s deploy.

Deploy

The deployment is as simple as bring the public content to the target host and let it server by any web server.

You can even using hugo to server it too without any external web server. I recommend this way if you run it on your own sever. However, you may want to use it with external hosts such as Github or S3.

Deploy to Github page

Using github page in organizer mode, everything have to sit inside master branch. Therefore, we will write our blog on source branch. And content of public folder will be write to master branch.

First, we will make source branch

git checkout -b source
git push -u origin source

Next, go back to master branch, clear out everything except public folder

git checkout master
g rm -rf archetypes content/ layouts/ static/ config.toml data
gc -m "cleanup"
mv pubic/* ./
rm -rf public
ga .
gc -m "init blog content for github page"
gp origin

Finally, switch back to source

g co source

Once we write content to public folder, we have to somehow move that conent to master branch for github page. That’s very annoyign. So we will use subtree. Git subtree is like having a sub repository inside your working space. You can run arbitray command on it. We can add subtree wth:

git subtree --prefix=diretory_of_sub_repository

subtree is just like a normal directory. You can add content and commit into paren repository. However, you can also push commit for that particular folder to its own reposiotry or branch.

Let’s do it:

rm -rf public
g subtree add --prefix=public origin master --squash

Make sure you have clean working dir: commit any local change.

The –squash options mean that if we have multiple change inside that sub tree, they will be squash into a single commit into parent history.

I then generate public again:

g subtree pull --prefix=public origin master
hugo --theme=natsume
ga public
gc -m "Update mainsite"

Now push whatever inside subtree to master branch

g subtree push --prefix=public origin master

The blog is live now. However, I want o use my domain blog.noty.im. Next, I create a CNAME file

echo "blog.noty.im" > public/CNAME
g add public/CNAME
gc -m "ADD CNAME"
gp origin source
g subtree push --prefix=public origin master

Deploy to S3

Basically, you take content of public folder and upload into a bucket. This can be done easily with s3cmd

You should follow this document http://docs.aws.amazon.com/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html to create necessay bucket. Once you have the bucket ready, you can deploy:

cd public
s3cmd sync --dry-run . s3://blog/

Why hugo

  • Written in Go lang, no dependencies.
  • Super fast.
  • Live reload bundling.
  • Super easy to use and setup.