Fly with code

Get wet inside ocean of code

0%

Tutorial of building Gitpage with Hexo in 10 minutes

Building a Gitpages using Hexo, we can get it done from 2 main parts separately.

1. Github setting-1st part

Visit Github, and create a new repository on the website

Input (username).github.io as your new repository name
for example, if your username is banana, then banana.github.io is your new repository name

Use CMD to enter root directory, and use below to create a new repository

1
2
3
git init
git add.
git commit -m "git init"

Continue using CMD to push the existed repository to Github

1
2
3
//push an existing repository
git remote add origin https://github.com/a7474267/a7474267.github.io.git //儲存庫路徑
git push -u origin master //branch:master

2. Hexo setting-2nd part

Install node.js : Download node.js from its official website.
Install git: Download git from its official website.
Install Hexo: Input below in CMD

1
npm install -g hexo-cli

After you finish all of the above steps, use CMD to enter the place you want to store your page data
Create necessary file in your designated folder

1
2
3
hexo init <folder name>
cd <folder name>
npm install

Input as below in CMD, and activate your page on local server

1
hexo s

Now we can add new articles, and learn how to use Markdown tool to edit your article

1
hexo new post "article name" //add new article

Go to source folder, you can find the new post you just added, and change title,date, tages as your preference

1
2
3
title: 'Tutorial of building Gitpage with Hexo in 10 minutes' // title of the article
date: 2020-08-22 16:03:31 // time
tags: Hexo Github // tags used on your Gitpage classify each type of article

Make some adjustment in your _config.yml under root directory

1
2
3
4
deploy:
type: git
repo: https://github.com/a7474267/a7474267.github.io.git
branch: master

After finishing new article, use below to generate new public folder

1
hexo g

Publish to your Gitpage

1
2
3
hexo c //Wipe out your existed public file
hexo g //generate again
hexo d //deploy to Github

Additional Knowledge

Using Google Drive as the source to attach photos on Gitpage
Upload photo to Google drive, and adjust sharing setting as below

Get Image_ID

Input Image_ID as below

1
![](https://drive.google.com/uc?export=view&id=[Image_ID])