Li Yifeng

Personal Website

Get a Personal Website

Posted on Edited on
In , ,
941 3 mins. Views:

This post contains all my personal experience of building this Personal Website, and can be considered as a guide to build your own website as well.

INTRODUCTION

For the best of pushing forward my personal development, a spot for storing personal notes, thoughts and experiences is needed, so I decided to start to build my own Personal Website.

Tool List

Main Tools Used with Reasoning:

  • GitHub Pages
    • I am lazy to maintain a server.
  • Hexo
    • Active community with solid looking.
  • NexT
    • Simply the best choice in Hexo.

If you are advanced enough, you don’t need to read the rest of this article.

GET A WEBSITE

By implement this section, you can get a basic Website powered by Hexo.

Get an Empty Repository

I mean, the official guide is already completed, so here I will only cover some of the details.

Get a GitHub account

Website Link: https://github.com

  1. Get on GitHub.
  2. Find and Click “Sign Up”.
  3. Enter your E-mail and your Password.
  4. Choose your username (can be changed later).
  5. Done.

I don’t even know why am I explaining this, but anyway I won’t explain it twice. > That is, if you don’t have an account on any website, just follow the above steps, more or less the same.

Get GitHub Desktop

This step isn’t mandatory, but I strongly recommend you to do so, simply because it is user friendly, much better than dealing with pure terminal, especially if you are new to Git.

Considering your System type:

  • Windows
    • Just do it.
  • Linux
    • Arch
      • github-desktop
        • Install it and it’s done.
          • Whenever I say installing it on Arch, it usually means running this in your terminal
            • yay -S github-desktop
          • Or like this
            • paru -S github-desktop
          • Or maybe like this (they are all the same)
            • pacman -S github-desktop
          • So in general
            • pacman || paru || yay -S package-name
          • Well considering you are using Arch, it shouldn’t be a problem for you to understand this.
    • Other
      • I don’t know man, I use Arch.
  • MacOS
    • Switch to Windows.

Get your Repository

By following the official guide, you should get something similar to my repository, but with everything empty.

If it’s not empty, make it empty for following steps. That is, deleting the files in your repository, by clicking files and clicking the red botton, then confirm deleting.

It is not that I don’t want to explain the steps here (or maybe), but it is that things might change, so it’s better to follow the official guide here.

Initializing Hexo

The official guide.

Get Node.js

Nobody cares about Node.js, you don’t need to know about it neither, but we do need it for Hexo.

Considering your System type:

  • Windows
    • Download and install, even if it warns you there are risks. Safety is for kids.
  • Linux

Get Git

Similar steps

Get Hexo

Now we have both Node.js and Git, ready for Hexo.

Run this in your terminal:

1
npm install -g hexo-cli

“npm” (Node Packaged Modules) is included in Node.js, that’s why we need Node.js. See more. > Though we might not need Git here, but maybe it is for the convenience of following steps. I don’t know.

Done.

Initializing Directory

The official guide.

Steps:

  1. Prepare a nice directory, where you will deal with all the settings and will edit your posts frequently.
  2. Open your terminal in that directory, or simply open and redirect to that directory.
  3. Run hexo init

Then your directory will be looked something similar to this:

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

Things might change by the version you installed, but should be more or less the same (or not).

Get your Website work

Get hexo-deployer-git

The official guide.

There are many options for deploying, here I choose hexo-deployer-git, simply because it’s the best way to get your Hexo on GitHub Pages.

Run this in your terminal:

1
npm install hexo-deployer-git

And get to your nice directory (where you initialized Hexo), editing _config.yml (using any text editor, e.g., VS Code), to add following code:

1
2
3
4
deploy:
  type: git
  repo: <repository url>
  branch: [branch]

OK here you would want to replace some of the keywords here to fit your own case.

In my case, it is:

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

Notice that when you initialize Hexo, it is possible that the system has already generate the whole code or part of the code for deploying in _config.yml for you.

In that case, you don’t need to add full code in _config.yml, but to fill the difference.

Deploy Hexo

Open a terminal in the directory (Initializing Directory), run:

1
2
3
hexo clean
hexo generate
hexo deploy

Or simply:

1
hexo clean && hexo g && hexo d

Visit Hello World

OK now check your repository again, it should be full of some random files.

Then you should be able to access you website already, by visiting https://your-username.github.io

If you can see something, a Hello World like what I got (see Hello World), then you are done.

GET A BETTER WEBSITE

To be continued…

Related Posts