Intro, build and host your website for free

2017-09-10
Static website hosting

Build and host your site for free

Welcome to developer’s notes blog.
I build this blog to share my learnings and solution to challenges I face while coding.

While learning/exploring something new or looking for solutions to the problems I faced, I used to copy paste notes(learnings) in random notepad or MS Word files. Managing these files was a challenge as searching thorough the content was tough. It needed synchronisation when I started working with multiple sysytems (was using google drive).
After learning about Markdown, I started creating these notes in a mardown file.
Later, I decided to create blog from these notes so that others can also get some benefit out of it.


I had to choose a static site generator for building posts quickly and to figure out what is the best fit for me I went to StaticGen, Snipcart, CreativeBloq and few more sites.

In order to create blogs from markdown files I chose Hexo as it didn’t required me to install anything else apart from a npm package ‘hexo-cli’, as I already have prerequisite node.js installed in my system.
I could have easily went out for other powerful tools out there but I was too lazy to install something and as it required some setup prior actual work.
Although some of them requires special mentions like:

  • Jekyll(GitHubPages), Hugo for blogging,
  • Gitbook, VuePress for documentation
  • Gatsby, Nuxt for e-commerce websites.

I request you try out the one which suits you the most and do share your experience with us.
The following content is what I have used to generate my blogs, and for reference one might check github repo


Now let’s start with actual work:
Do refer Hexo docs
First, install hexo-cli:

1
npm install -g hexo-cli

Go to your project folder or create one:

1
2
mkdir devnotes
cd devnotes

Inside that directory, initialize your website:

1
hexo init

Go through config.yml and update it as per your needs.

Create a new post in your website created in previous step:

1
$ hexo new "Intro"

Enter the content in markdown.
Refer: Writing

Run your server:

1
$ hexo server

For more details, go to: Server

If you are facing any issues then try debugging:

1
hexo --debug

Generate static files

1
$ hexo generate

For more details, refer: Generating

Deploy to remote sites

1
$ hexo deploy

For more details, refer: [Deployment](https://hexo.io/docs/deployment.html


As I am using github as source control, I could have hosted this website on Gihub pages but I wanted to explore Netlify

I created a website in Netlify and did following configuration:

  • Set the repository URL.
  • Set build command as hexo deploy --generate
  • Set the publish directory, ex: public.
  • Set your branch, in my case it was ‘master’
    Oh yeah, your site is up and running with continous deployment!
    Basic Tip: You might want to work on a different branch and then create a pull request for merging changes into master beanch.
    As soon as your pull request is approved and merged, you website/blog will be automatically updated.

Note: I go through web articles, videos and books; those learnings are posted in these blogs and If I forget to mention the author, please do let me know and I will update.
Also, I would really appreciate suggestions for improvements, Thanks.