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 | mkdir 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.