What is Hexo? Hexo is a static blog generator akin to jekyll, uses the latest JS standards. It outputs the site in the classic HTML, CSS and JS after post-processing, which means that you can deploy it on a CDN of your choice.
Hexo is sourced from npm so make sure npm in installed first. Then install Hexo:
npm install -g hexo-cli
-g tag makes sure its installed globally on your system, hence also giving us access to the hexo commands from any directory.
hexo init hexo-project
cd hexo-project npm install git init git add . git commit -m "first commit"
npm install installs all the required modules in the
node_modules/ required for development.
git init initializes an empty git project. Then add and commit all the files that have been created.
Now lets add some style to our new blog, I'm using the cuppertino theme, you can find it here on Github. In the root of your project add the theme as a submodule:
git submodule add https://github.com/MrWillCom/hexo-theme-cupertino.git themes/cuppertino
This should give you the theme files in the
themes/ directory. Now edit the the
_config.yml in the
themes/cuppertino folder. Here's what I changed:
... # navigation config nav: # the title displays in the upper left corner which won't change title: Poorna. # the items displays in the upper right corner items: # these items will display as a link # Archives: /archives # Friends: /friends Projects: /projects About: /about # these will be automatically be an icon # GitHub: https://github.com/MrWillCom # CodePen: https://codepen.io/mrwillcom # Patreon: https://www.patreon.com/MrWillCom ...
You can play around and figure out how to customize the nav, footer and everything else, its extremely simple. Now change the global settings of the blog in the main
_config.yml. Here's mine:
# Site title: 'Poorna.' subtitle: '' description: The complete reboot of Cloud, Devops and Analytics. keywords: author: Poornachandra language: en timezone: ''
Lets go ahead and write our first post.
hexo new post hello-world
The above command should generate a file named
source/_posts. Then run the hexo build command:
npm run build
Now lets start a live server to preview the changes we make to the file.
npm run server
This should spin up a server at
http://localhost:4000/. Open it in the browser.
hello-world.md Replace the contents to the following
--- title: Hello World --- Hello world. This is my first post on Hexo. <blockquote class="imgur-embed-pub" lang="en" data-id="a/pDVdg" data-context="false" ><a href="//imgur.com/a/pDVdg">Significant amount of points away from next imgur rank. Here's my favorite cat gif for your caturday</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
Now lets commit the changes:
git add . git commit -m "deploy post"
Follow the next tutorial on how to deploy the blog on AWS S3 + Cloudfront