Objectives

• Making a personal website
• Publishing first post in your website

Introduction

In today’s digital age, having a personal website is essential for showcasing your portfolio, sharing your thoughts, or establishing your online presence. This tutorial will guide you through the process of creating your own website using GitHub Pages and Hexo, a powerful static site generator. By the end of this guide, you’ll have a fully functional website hosted for free on GitHub, and you’ll know how to publish and manage your content.

Prerequisites

Before we begin, make sure you have the following:

• A GitHub account (create one at github.com if you don’t have it already)
• Git installed on your computer (Download Git)
• Node.js and npm installed (Download Node.js)
• Basic knowledge of Markdown (for writing posts)
• A text editor (VS Code, Sublime Text, etc.)

Part 1: Setting Up Your GitHub Repository

Step 1: Create a new GitHub repository

1. Log in to your GitHub account
2. Click on the “+” icon in the top-right corner and select “New repository”
3. Name your repository username.github.io (replace “username” with your actual GitHub username)
4. Make sure the repository is set to “Public”
5. Click “Create repository”

This special repository name tells GitHub that you want to use GitHub Pages to host your website. Your website will be available at https://username.github.io.

Step 2: Set up GitHub Pages

1. Go to your newly created repository
2. Click on “Settings” tab
3. Scroll down to the “GitHub Pages” section
4. Under “Source”, select “main” branch
5. Click “Save”

GitHub will now build and deploy your website automatically whenever you push changes to the main branch.

Part 2: Setting Up Hexo

Hexo is a fast, simple, and powerful blog framework that allows you to create static websites using Markdown. It’s particularly popular for creating blogs and personal websites.

Step 1: Install Hexo

Open your terminal or command prompt and run the following commands:

1
2
3
4
5
6
7
8
9

# Install Hexo CLI globally
npm install -g hexo-cli

# Create a new Hexo project
hexo init my-website
cd my-website

# Install dependencies
npm install

Step 2: Configure your Hexo site

Open the _config.yml file in your project directory. This is the main configuration file for your Hexo site. Update the following settings:

1
2
3
4
5
6
7
8
9
10
11
12
13

# Site
title: Your Website Title
subtitle: Your Website Subtitle
description: A brief description of your website
keywords: your, keywords, here
author: Your Name
language: en
timezone: Your/Timezone

# URL
url: https://username.github.io
root: /
permalink: :year/:month/:day/:title/

Replace the placeholder values with your own information. The url should match your GitHub Pages URL.

Step 3: Choose and configure a theme

Hexo comes with a default theme called “landscape”, but there are many other themes available. You can browse themes at the Hexo Theme Gallery.

To install a theme, follow these steps:

1. Find a theme you like
2. Clone the theme repository into the themes directory of your Hexo project:

1

git clone https://github.com/theme-author/theme-name.git themes/theme-name

3. Update the _config.yml file to use the new theme:

1

theme: theme-name

4. Check the theme’s documentation for any additional configuration steps

Part 3: Creating Content

Step 1: Create your first post

To create a new post, run the following command:

1

hexo new post "My First Post"

This will create a new Markdown file in the source/_posts directory. Open this file in your text editor and add your content using Markdown syntax.

A basic post might look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

---
title: My First Post
date: 2025-02-15 14:30:00
tags: [beginner, hexo]
---

## Hello World!

This is my first post on my new website. I'm excited to share my thoughts and projects with you.

### What I'll be posting about

- Web development tutorials
- My personal projects
- Thoughts on technology trends

Stay tuned for more content!

Step 2: Create pages

In addition to posts, you might want to create static pages like “About” or “Contact”. To create a new page, run:

1

hexo new page "about"

This will create a new directory and Markdown file in the source directory. Edit the file to add your content.

Step 3: Preview your site locally

Before deploying your site, you can preview it locally by running:

1

hexo server

This will start a local server at http://localhost:4000 where you can see how your website looks.

Part 4: Deploying to GitHub Pages

Step 1: Install the deployment plugin

To deploy your Hexo site to GitHub Pages, you need to install the deployment plugin:

1

npm install hexo-deployer-git --save

Step 2: Configure deployment settings

Update your _config.yml file with the deployment settings:

1
2
3
4

deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: main

Replace “username” with your GitHub username.

Step 3: Generate and deploy your site

Run the following commands to generate your static site and deploy it to GitHub Pages:

1
2
3

hexo clean    # Clean the cache
hexo generate # Generate static files
hexo deploy   # Deploy to GitHub Pages

After a few minutes, your website should be live at https://username.github.io!

Part 5: Customizing Your Website

Step 1: Customize your theme

Most Hexo themes allow for customization. Check the documentation for your chosen theme to learn how to:

• Change colors and fonts
• Add a logo or favicon
• Customize the layout
• Add widgets or sidebars

Step 2: Add functionality

You can extend your Hexo site with plugins. Here are some useful ones:

• hexo-generator-sitemap: Generates a sitemap for search engines
• hexo-generator-feed: Generates an RSS feed
• hexo-generator-search: Adds search functionality to your site

To install a plugin, run:

1

npm install plugin-name --save

Then configure the plugin in your _config.yml file according to its documentation.

Step 3: Add a custom domain (optional)

If you have your own domain name, you can use it with your GitHub Pages site:

1. Create a file named CNAME in the source directory of your Hexo project
2. Add your domain name to this file (e.g., www.yourdomain.com)
3. Update your _config.yml file with your custom domain:

1

url: https://www.yourdomain.com

4. Configure your domain’s DNS settings to point to GitHub Pages (follow GitHub’s documentation for this step)
5. Deploy your site again

Part 6: Maintaining Your Website

Step 1: Regular updates

To keep your website fresh and engaging, publish new content regularly:

1
2
3
4
5
6
7
8

# Create a new post
hexo new post "My New Post"

# Edit the post
# Then generate and deploy
hexo clean
hexo generate
hexo deploy

Step 2: Update your site and themes

Periodically update your Hexo installation and themes to get new features and security updates:

1
2
3
4
5
6

# Update Hexo
npm update

# Update a theme (go to the theme directory)
cd themes/theme-name
git pull

Step 3: Back up your content

It’s important to back up your website content. Since you’re using Git, you can create a separate repository for your Hexo source files:

1. Initialize a Git repository in your Hexo project directory:

1

git init

2. Create a .gitignore file to exclude unnecessary files:

1
2
3
4
5

.DS_Store
node_modules/
public/
.deploy*/
db.json

3. Add, commit, and push your files to a new GitHub repository:

1
2
3
4

git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/website-source.git
git push -u origin main

This way, you’ll have your website content backed up separately from the deployed site.

Conclusion

Congratulations! You now have a personal website hosted on GitHub Pages. You’ve learned how to:

• Set up a GitHub repository for your website
• Install and configure Hexo
• Create and publish content
• Deploy your site to GitHub Pages
• Customize your website
• Maintain your site over time

Your website will serve as a platform for sharing your ideas, showcasing your projects, and establishing your online presence. Keep experimenting with different themes, plugins, and content formats to make your site truly your own.

Resources

• Hexo Documentation
• GitHub Pages Documentation
• Markdown Guide
• Hexo Themes
• Hexo Plugins

Happy blogging!