Step-by-Step: Using Hexo and GitHub to Create Your Website

Hi everyone! I’m excited to share that I’ve created my own website today! Welcome to my blog!

In this post, I’ll share my step-by-step approach to using Hexo and GitHub to build it.

1. Preparation

1. GitHub Account

   You’ll need a GitHub account. If you don’t have one, head over to the official website http://github.com to register.

2. Install Git

   Install Git on your computer. I used homebrew for installation.

3. Install Node.js

   Install Node.js on your computer. You can also use homebrew for this installation.

2. Create Repository

To set up your website:

1. Create Repository: Go to your GitHub account and navigate to “Your repositories” to access the repositories page. Create a new repository named <username>.github.io.

2. Create Homepage File: Within this repository, create a new file named index.html. This file will serve as the homepage for your website.

3. Add Content to Homepage: Populate the index.html file with some basic content. For instance:

   <p>Hello</p>
   <p>I'm xxx, and this is my personal website.</p>

4. Commit Changes: After adding content, click “Commit new file” to save these changes to the repository.

5. Access Your Homepage: Your newly created homepage’s address can be found in GitHub Pages at https://[your_username].github.io/

3. Configure SSH

To enable remote file uploads from your computer to your GitHub repository, configure SSH by following these steps:

1. Click on your personal GitHub account’s “Settings” option.
2. Navigate to “SSH and GPG keys” to configure your SSH public key.

4. Blog Initialization

We’ll use Hexo to create your blog website. Hexo is a static blog site generator based on Node.js. You can find its official website at https://hexo.io.

Create an empty folder, for instance, github_blog. Use the hexo init command to initialize your blog. The contents of the initialized folder are described as follows:

• _config.yml: Configuration information for the website, where you can set most parameters.
• package.json: Application information.
• scaffolds: Folder for templates. Hexo uses these to create files when you create a new post.
• source: Folder for resources.
• themes: Folder for themes, which Hexo uses to generate static pages.

5. Generating Your Personal Blog Website

Edit the _config.yml file with the following deployment information:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/[your_username]/[your_repository_name]
  branch: main

After installing the plugin npm install hexo-deployer-git --save, run the following commands:

hexo clean    # Clean up data
hexo d -g    # Generate the blog

At this point, your blog data will be pushed to GitHub. The empty repository created in the first step will now have content. You can access your website at https://username.github.io/, where ‘username’ is your GitHub username.

6. Create a New Post

Let’s create a blog post titled “Hello world!” using the following command:

hexo new "Hello world!"

This will generate a Hello world!.md file in the source/_posts folder within your current directory. The file will have the following content:

---
title: Hello world!
date: 2023-09-02 18:32:29
tags: [empty]
---

After the ---, you can write the content of your blog post using Markdown format.

Once you’ve finished writing your blog post, use the following commands:

hexo clean    # Clean up data
hexo d -g    # Generate the blog

This will update your personal blog with the newly added post.

I hope this guide helps you. Happy website building!