小白象

whitelephantee

0%

Hexo + Github Pages 搭建个人网站

发表于 更新于 分类于
本文字数： 5.5k 阅读时长 ≈ 10 分钟

作为一名基本不会编程只学了一阵python的真·小白，记录一下探索的过程～

Github新建项目

在 GitHub 新建一个仓库（Repository），然后去到 Settings，开启Github Pages，成功后就会提示你可以在https://{username}.github.io/{Repository Name}/中进行发布。

比如我的github username是whitelephantee，如果我建一个叫做YujiaZhou的Repository，开启Github Pages后就能在https://whitelephantee.github.io/YujiaZhou/发布，

一个特殊的Repository名是{username.github.io}，如果命名为这个的话Github就会自动合并。比如我（GitHub用户名是whitelephantee）把个人主页的Repository命名为whitelephantee.github.io的话，我的域名就不是https://whitelephantee.github.io/whitelephantee.github.io/，而是https://whitelephantee.github.io/。

新建完成之后就可以进行后续操作了。

安装环境

安装 Node.js

首先在自己的电脑上安装 Node.js，下载地址：https://nodejs.org/zh-cn/download/，可以安装 Stable 版本。

安装成功后可以在terminal输入以下代码进行确认，如果返回版本号的话就安装成功啦。

node -v
npm -v

安装 Hexo

Hexo就是我们要用来搭建博客的平台。

注意一定要有sudo，我看网上的教程都没有sudo，但我实际操作中没有sudo就不行诶。

sudo npm install -g hexo-cli

如果命令一直停留在sill install loadAllDepsIntoIdealTree不动的话，使用阿里仓库

1
sudo npm --registry=https://registry.npm.taobao.org install -g hexo-cli

初始化项目

创建项目。

hexo init {name}
cd {name}
npm install

这里面的 {name} 就是我们想给这个个人主页起的名称，比如我就起了whitelephantee。

hexo init whitelephantee
cd whitelephantee
npm install

然后可以确认一下里面的文档。

ls

预览一下

hexo s

出现这个就说明成功了，可以在浏览器里输入http://localhost:4000看一下就可以，这是Hexo的默认界面，之后等连接上Github之后可以再修改。

 Hexo is running at http://localhost:4000 . Press Ctrl+C to stop

截屏2020-09-05 下午4.51.13

预览好之后就可以按ctrl+c结束预览，然后进入下一步。

链接Github

配置SSH Key

首先看一下自己本身有没有SSH Key，如果没有报错的话就说明有SSH Key。

cd ~/.ssh

有的话直接查看一下。

cat ~/.ssh/id_rsa.pub

就算有的话还要再确认一下并添加主机到本机SSH可信列表。如果返回Hi xxx! You are successfully authenticated, but Github does not provide shell access. 的话就对啦，如果显示Permission denied(public key)的话，则表明需要重新生成SSH Key。

ssh -T git@github.com

无论是没有还是需要重新生成都可以参考这个。

Github Docs: Error: Permission denied (public key) 里 Make sure you have a key that is being used 部分，并按照指示 新增SSH Key 并 添加到Github中

部署

打开_config.yml 文件

cd {name}
open _config.yml

找到 Deployment 这个地方，更改一下deploy这个地方，中间repo这个链接打开应该是Github里Respository的链接，修改完保存。

deploy:
  type: git
  repo: https://github.com/{Repository Name}/{Project Name}
  branch: master

安装一个插件。

npm install hexo-deployer-git --save

之后进行部署，如果最后一行返回 INFO Deploy done: git 就说明好啦。

hexo g -d

我们可以去 Github Pages 看一眼，比如我回到 https://whitelephantee.github.io/ 看一下就能够看到和原来在localhost上的预览界面一样的界面啦。

部署网页

虽然现在链接好了，但是个人网页里面的内容都还没有调整。

更改基本信息

继续打开_config.yml 文件

open _config.yml

找到 site 部分

title: 小白象 #个人网页名称
subtitle: whitelephantee #副标题
description: 小白象的个人主页 想到什么写什么 #描述
keywords: #关键词
author: whitelephantee #作者
language: zh-CN #语言,默认的是en英语，我打算写中文的居多所以改成中文

更改主题

Hexo 的主题就有很多，默认的是 landscape，其他得主题可以在 Hexo Theme 里进行预览，找到心仪的之后下载下来，比如我下载了 next 主题。

git clone https://github.com/theme-next/hexo-theme-next themes/next

在_config.yml 里找到 theme 部分，进行更改。

theme: next

主题配置

进入主题的_config.yml 文件（注意不是 project 的 _config.yml 文件），按自己的喜好进行一下更改和调整，还是以我的为例。

cd themes
cd next
open _config.yml

Minify：自动删除不必要的文件

minify: true

footer - icon：在最下面作者和年份默认会有一个心形小图标，我想换成一个大象的图标。

icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-elephant
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#000000"

scheme：next一共提供了4种样式，默认是Muse，我选择了Pisces。

scheme: Pisces

Menu: 默认的标签栏只有主页和归档页，但hexo还提供了一些备选项，包括标签页、分类页等，可以按需开启。

menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  schedule: /schedule/ || fa fa-calendar
  sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

avatar：小头像，把目标图片文件放到 themes/next/source/images/avatar.JPG 路径，然后再在主题的_config.yml 文件中进行更改。

avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.JPG
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

Pangu: 这是一个神器的选项，专门针对强迫症患者，在编译生成页面的时候，中英文之间就会自动添加空格。

pangu: true

内容构建

更改第一篇内容

预览的内容还算符合想法，但是主页的第一篇默认为 Hello World，想改成自己的内容。

首先打开/source/_posts/hello-world.md

cd source/_posts
open hello-world.md

然后进行编辑就好啦，hexo和github一样，默认的都是用Markdown语法写作，很简单的一学就会。

---
title: #标题
---

# 一级标题
## 二级标题


1
#代码块


[Name](Link) #链接

新建一篇文章

新建一篇文章的话还是在终端中。

hexo new {name}

然后就像上面更改一样进行写作就好啦，最上面写上时间、标题等。

---
title: 标题 
date: 日期 # 自动创建，如 2019-08-22 11:47:21
tags: 
- 标签1
- 标签2
- 标签3
categories:
- 分类1
- 分类2
---

增加分类页

因为我不太喜欢标签的管理方式，所以我就只开了分类页，标签页的方式和分类页相似。

增加分类页面，会生成一个 source/categories/index.md 文件。

hexo new page categories

打开后在title下面增加两行。

type: categories
comments: false

然后在主题的 _config.yml 文件里，在menu里打开categories就可以啦。

categories: /categories/ || th

增加搜索页

增加一个网站内内容的搜索功能。

安装一个hexo-generator-searchdb插件。

npm install hexo-generator-searchdb --save

在项目的 _config.yml 文件里添加search选项。

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

然后在主题的 _config.yml 里面也修改一下。

local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 5
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

添加字数统计和阅读时长

首先安装一个插件。

npm install hexo-symbols-count-time --save

在项目的 _config.yml 文件里添加。

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 300
  suffix: "mins."

然后在主题的 _config.yml 里面也修改一下。

symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false

增加动态背景

切换到Next主题文件夹

cd themes/next

安装模块

git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

修改主题的 _config.yml 

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
  enable: true
  onmobile: true # 是否在手机上显示
  color: "255,51,51" # RGB颜色设置
  opacity: 0.5 # 线条透明度
  zIndex: -1 # 显示级别
  count: 160 # 线条的数量，越多越卡

Final Touch

预览

设置了那么多，效果如何呢？让我们先在本地预览一下。

hexo s

更新Github Page

可以直接在终端中运行。

hexo clean
hexo generate
hexo deploy

为了方便，我直接创建了一个脚本文件，这样以后每次更新就只用输入一行就可以了。

创建创建脚本文件。

touch deploy.sh
chmod 755 deploy.sh
./deploy.sh

将文本打开并写入内容，然后执行。

sh deploy.sh

这样一个个人网页就算基本搭建好啦。

参考文档：