Build your own website: Hugo + Github Pages + Namecheap

 

Did you know that you can have your own website without paying for hosting?

Ok, the purpose of this post is not promoting a cost-saving method, but to show you how you can setup your website using a static content generator (Hugo) and hosting in on GitHub.com connected to your own domain. So you don’t need to pay for and manage a hosting service.

What you need for this:

  1. A registered domain name (You can still use this with a sub-domain on github.io website, but the process will be a bit different)
  2. An account in GitHub.com website
  3. A terminal application (Like iTerm on Mac or the command line on Windows)

Here is the list of steps you need to take:

  1. Setup DNS for your domain
  2. Setup your GitHub.com account
  3. Download Hugo on your computer and write something
  4. Update your GitHub.com account with the new content

And now the details!

Setup DNS

Details of this step depend on your domain registrar. For me, it is NameCheap.

You need to enter the address of GitHub.com as the hosting system for your domain. So if anyone types your domain name into their browser, they will be redirected to GitHub to show content.

First, you need to set “NAMESERVERS” option in the domain management page to “Namecheap BasicDNS”.

Screen Shot 2017-06-29 at 04.43.47

After that you can go to “Advanced DNS” page and update “HOST RECORDS” like below:

Screen Shot 2017-06-29 at 04.44.18

Here the numbers are specific to GitHub, so you will need to enter them exactly like this. “mahdix” is my username on the GitHub website. You will need to replace this with your own username.

Set up GitHub

After setting up your DNS records, you need to tell GitHub about your domain. So when it is referred to about a domain name, it knows what to show.

Go to your GitHub.com account, add a new repository by clicking “+” button on the top right of the screen, and selecting “New repository”. It’s better if you name this new repository same as your domain name but you can choose whatever name you like.  Make sure “Initialise this repository with a README” is checked, so your repository will be created with some basic content.

Screen Shot 2017-06-29 at 04.47.32

Get Hugo and write

First, you will need to open your console application. Make sure `git` is installed on your system. If it is not, follow instructions here to do the installation.

In the console, run `git clone` command to fetch a copy of your newly created repository.

Then you will need to run Hugo and write some content. You can follow instructions here as a starting guide.

When you are finished writing some content, you will need to push your changes to GitHub. This step informs GitHub about the new content you have just generated. This is done via `git push origin` command. Note that you may need to set up SSH keys if you are doing this for the first time (explained here).

Finish GitHub set up

Now, you need to tell GitHub about your domain name. Go to your GitHub repository, and go to “Settings” tab. There is a section called “Custom Domain”. You will need to enter your domain name there:

Screen Shot 2017-06-29 at 04.56.25

After you have done this step, your new content will be visible in a few minutes (This takes a bit longer only for the first time). Note that you only need to do this step once.

How to automate the publish process

There is a way to use some online services to automate the Hugo part. So you only need to make changes on GitHub website interface (write content, create new pages, …) and as soon as you submit your changes, they will be published for you. I will explain this in a follow-up post.

 

Must-have vim plugins

The other day I was cleaning up my .vimrc file and thought about writing a post about plugins that I use and the reason.

I believe in simplicity, especially in my work environment. That’s why I always try to customize as little as possible and try to use existing features. During past couple of years since I started using vim, I have found below plugins really useful.

Vundle

This is the most important plugin that I use. It helps my install other plugins more easily and conveniently.

You just need to start your `.vimrc` file with specific format and then for each plugin you want to have, add a line in this format:

Plugin 'tpope/vim-commentary'

The text inside single quote is the GitHub address of the repository of the plugin (except github.com).

But I think having so few plugins, I may be able to get rid of this one in future.

vim-commentary

This is the plugin which helps me comment/uncomment a line of a block of text. You simply need to use `gc` and the currently selected block will be commented (or commented out if it’s already commented). `gcc` does this for the current line.

You can combine this command with text movement verbs (e.g. `gc10j` to comment current and next 10 lines).

The good thing about this plugin is that it detects the correct commenting syntax so it doesn’t matter if you are working on a bash script or Python source code file. Just press the shortcut and this plugin will handle the rest.

fzf

I am always editing files and switching between buffers in vim. Unfortunately, standard features of vim are never enough for me (I wonder why they don’t provide better options built-in). That’s why I use this excellent plugin.

It uses `fzf` command line utility as a back-end and lets you search for a buffer, file, MRU or text in current or all buffers. It is a pretty handy tool for me.

Plugins that I used before but not now

supertab

This is a great plugin which lets you use <TAB> key in insert mode to invoke autocomplete feature of vim. But I find current shortcuts enough for my job, especially considering the fact that, due to vim being a text editor, I cannot expect any sophisticated autocomplete which makes this feature less useful for me.

CtrlP

This was the plugin I was using before fzf. It’s a very powerful plugin and lets you search for buffer, file, text and some other handy features.

The reason I switched to fzf was that it uses fzf command line utility which can be handy sometimes for me when I am working inside the terminal.

mru

In a (failed) effort to replace CtrlP with a simpler alternative, I tried this one but gave up and returned to my favorite searcher plugin.

This is a useful plugin which helps search into most recently opened files and open them.

vim-buffergator

Another plugin which was supposed to replace fzf (CtrlP at that time) but did not succeed. It lets you search in current open buffers and switch to another buffer.

delimitMate

This plugin provides autocompletion for delimiters like single-quote, double-quote, braces, etc.

The reason I no longer use this plugin is that during my edits, there are lots of times that I need to insert a single delimiter, but this plugin comes into my way and forces insertion of an extra delimiter which I have to delete. Sometimes this can be frustrating, although some other times it can be handy.

vim-operator-highlight

This plugin highlights all operators (`()+-*/` and other similar operators) in your file. This can help you read a source code file more easily but my problem with this plugin was that it also highlights comment section of the code which makes reading comments annoying. Also having a lot of different colors in your text editor can sometimes be confusing.

syntastic

This plugin checks the syntax of the current source code file and lets you know the error messages (if any). It highlights error lines and lets you easily navigate between errors. Personally, I prefer to use a terminal to check/compile my source code. And also having experience in working with dynamic typing languages, there is not much use for syntax checking as almost everything is evaluated at runtime (which I don’t like but that’s another story).