免费网站搭建-github+Hexo博客搭建与美化

一、博客环境搭建

1.下载 Git 和 Node.js

（1）Node.js 的安装与配置
首先前往 Node.js 官网下载适合你电脑系统的安装程序。下载完成后，开始安装流程：
1.1.1 打开安装程序，点击“Next”，进入下一步安装。
1.1.2 勾选“I accept the terms in the License Agreement”，同意安装协议，再次点击“Next”。
1.1.3 选择安装位置，比如“C:\Program Files\nodejs”，点击“Next”。
1.1.4 选择安装模块和功能，全部安装并添加到系统环境变量，继续点击“Next”。
1.1.5 此步骤可跳过，该选项是安装一些编译本地模块的工具，如 Python、C/C++等，点击“Next”。
1.1.6 点击“Install”，等待安装完成。
1.1.7 当出现特定画面时，Node.js 安装成功。
1.1.8 为验证安装并测试 Node.js 是否加入环境变量，若出现特定情况，说明安装大功告成。若执行“node -v”报错，可手动将 Node.js 的安装路径添加到环境变量中。找到“我的电脑->属性->高级系统设置->环境变量”，在系统变量下找到名为“path”的变量，将 Node.js 的安装路径添加到变量值末尾。若末尾有英文分号，可直接添加路径；若无分号，先添加分号再保存。回到桌面，打开命令提示符（Win+R），执行“node -v”查看是否成功。
1.1.9 设置 npm 的镜像源：

# 查看 npm 的配置
npm config list
# 默认源
npm config set registry https://registry.npmjs.org
# 临时改变镜像源
npm --registry=https://registry.npm.taobao.org
# 永久设置为淘宝镜像源
npm config set registry https://registry.npm.taobao.org
# 另一种方式，编辑 ~/.npmrc 加入下面内容
registry = https://registry.npm.taobao.org

1.1.10 设置 npm 的内置路径——全局模块路径和缓存路径（可选）。若 C 盘空间充足，可不进行此步骤。在 Node.js 的安装位置新建“node_global”和“node_cache”两个文件夹，例如“C:\Program Files\nodejs\node_global”和“C:\Program Files\nodejs\node_cache”。然后执行以下命令：

npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"

接着在环境变量中，找到用户变量下的“path”进行修改，添加相应路径。

（2）Git 的安装与配置
前往 Git 官网，根据电脑系统配置信息下载安装程序。安装步骤如下：
1.2.1 下载好安装包后打开，点击“Next”。
1.2.2 选择安装位置，如以 C 盘为例，安装到其他位置可点击“Browse”选择。点击“Next”进入下一步。
1.2.3 选择是否创建桌面快捷方式，其他默认，点击“Next”。
1.2.4 是否将 Git 快捷方式的目录加入开始菜单栏。
1.2.5 选择文本编辑器方式，默认是 Vim，也可选择其他方式。选择好后点击“Next”。
1.2.6 选择安装 Git 时对环境变量 PATH 的影响，建议默认勾选中间项，不要修改，点击“Next”继续安装。
1.2.7 选择 Git 在使用 HTTPS 时使用的库，若无特殊需求，保持默认选项，点击“Next”继续安装。
1.2.8 选择提交与拉取记录时对换行符的处理方式，若无特殊需要，默认选择，点击“Next”继续安装。
1.2.9 选择模拟终端软件，若无特殊需要，默认选择，点击“Next”继续安装。
1.2.10 最新功能的询问，若不想尝试尚未保证稳定性的新功能，默认不勾选，点击“Install”完成安装。
1.2.11 安装完成后，回到桌面，点击鼠标右键，会出现“Git GUI Here”和“Git Bash Here”两个选项。在打开的命令提示符（Win+R）中，分别输入“git”和“git –version”，若出现特定情况，即安装成功。

（3）修改配置文件要用到的软件：Visual Studio Code 官网下载。

二、Github 注册以及 Github Pages 创建

打开 Github 官网，点击右上角的“Sign Up”，填写相关信息进行注册。验证完成后，点击“Next：Select a plan”，可能会出现动物验证界面，将动物调整为正向显示。接着选择“Free”，下方两个选项可选可不选，点击“Continue”。Github 会发送一封邮件进行验证，验证后才可创建库。创建库时，仓库名格式必须为“<用户名>.github.io”，“Description”为描述仓库，可自定义填写或不填。勾选“Initialize this repository with a README”，点击“Creat repository”进行创建。创建成功后，可测试一下，点击“Create new file”，命名文件为“index.html”，填写内容后点击“Commit new file”。然后打开新网页，输入网址“https://<你的用户名>.github.io”，若能看到新网页且内容为你所写，说明 Github Pages 已创建成功。

三、配置 Git 用户名和邮箱

在桌面点击鼠标右键，选择“Git Bash Here”，输入以下两个命令并回车：

git config --global user.name "此处填写你注册时的用户名"
git config --global user.email "此处填写你注册时的邮箱"

然后找到“.gitconfig”文件，通常在“C:/Users/[username]/.gitconfig”（若未找到，开启显示隐藏文件功能），用编辑器打开，看到相应内容即配置成功。

四、本地安装以及发布

QQ 交流群(及文件下载):478404205

1.安装到本地
选择一个磁盘作为博客文件存放位置，新建文件夹，如“blogtest”。在此处点击鼠标右键，选择“Git Bash Here”，依次输入以下命令：

# hexo 框架的安装
npm install -g hexo-cli
# 等上一个命令完成后，输入下面的命令
hexo init <新建文件夹的名称>
# 初始化文件夹
cd <新建文件夹的名称>
npm install
# 安装博客所需要的依赖文件

等待运行完成，此时文件夹中会多出许多文件。注意，后续命令需在站点目录下（即文件夹内）使用 Git Bash 运行。此时 Hexo 框架的本地搭建完成。可在命令行依次输入以下命令进行测试：在浏览器中打开“http://localhost:4000/”，若能看到网页，说明 Hexo 博客已在本地成功运行。

2. 本地博客发布到 Github Pages
之前已完成 Github 账户注册和 Github Pages 创建，现在将本地博客发布至 Github Pages。
2.1 首先安装发布插件，在站点目录下执行以下命令：

npm install hexo-deployer-git --save

接着将本地目录与 GitHub 关联起来，输入以下命令：

ssh-keygen -t rsa -C "你的邮箱地址"

输入后一直回车，在“C:/Users/[username]”目录下找到名为“.ssh”的文件夹，里面有“id_rsa.pub”和“id_rsa”两个文件。用文本编辑器打开“id_rsa.pub”，复制里面的内容。然后打开 Github，点击右上角头像“Settings”，选择“SSH and GPG keys”，点击“New SSH key”，将复制的内容粘贴到“Key”框中，“Title”可随意填写，点击“Add SSH key”完成添加。
2.2 回到 Git 的命令行界面，测试是否与 GitHub 连接成功。输入以下命令：

ssh -T git@github.com

点击回车，出现询问内容时输入“yes”，回车后若出现特定内容，说明连接成功。
2.3 进入博客站点目录，用文本编辑器打开“_config.yml”，这是博客的配置文件。修改以下几个地方：

title: 你的博客名
subtitle: 博客的副标题，有些主题支持
description: 博客描述
keywords: 博客关键词
author: 作者，在文章中显示
language: 博客语言语种
timezone: 时区

滑到文件最底部，在“deploy”下添加“repo”项和“branch”项，填入如下代码：

type: git
repo: git@github.com:Github 用户名/github 用户名.github.io.git //也可使用 https 地址，如：https://github.com/Github 用户名/Github 用户名.github.io.git
branch: master

2.4 最后生成页面并发布至 Github Pages，执行以下命令：

# Hexo 会根据配置文件渲染出一套静态页面
hexo g
# 将上一步渲染出的一系列文件上传至至 Github Pages
hexo d
# 也可以直接输入此命令，直接完成渲染和上传
hexo g -d

上传完成后，在浏览器中打开“https://<用户名>.github.io”，查看上传的网页。若页面变为本地调试时的样子，说明上传完成。若未变，查看命令行窗口信息是否有错误，若无错误可清除浏览器缓存试试。

五、hexo 博客主题安装与修改

1. 主题下载与安装
点击特定网站下载 master 分支的最新稳定版代码，解压缩后，将“hexo-theme-matery”的文件夹复制到 Hexo 的“themes”文件夹中。也可在站点目录文件夹下使用“git clone”命令下载，有稳定版和最新版可选，自主选择版本进行下载。

git clone https://github.com/blinkfox/hexo-theme-matery themes/matery # 稳定版
git clone -b develop https://github.com/blinkfox/hexo-theme-matery themes/matery # 最新版(不定期进行优化更新)

2. 主题配置

（1）切换主题
需明确站点配置文件和主题配置文件的区别。站点配置文件是根目录下的配置文件，主题配置文件是根目录下“themes”文件夹中对应主题的配置文件。配置文件中的标点符号不要出现中文格式，否则会运行出错。主题下载完成后，将站点配置文件中的“theme”值修改为下载主题的文件名，此处为“matery”。同时，可进行一些站点配置文件的其他修改，如语言选择为中文用户时，在“language:”后添加“zh-CN”；网址修改为你的网址名，若有域名则修改为域名；站点配置文件的“per_page”属性建议修改为 6 的倍数，以在适应设备时有较好的显示效果。

（2）新建标签 tags 页面
tags 页用于展示所有标签。若博客“source”目录下没有“tags/index.md”文件，需新建一个，命令如下：编辑新建的页面文件，至少需要以下内容：

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---

（3）新建分类 categories 页面
categories 页用于展示所有分类。若博客“source”目录下没有“categories/index.md”文件，需新建一个，命令如下：

hexo new page "categories"

编辑新建的页面文件，至少需要以下内容：

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

（4）新建关于我 about 页面
about 页用于展示关于我和博客信息。若博客“source”目录下没有“about/index.md”文件，需新建一个，命令如下：

hexo new page "about"

编辑新建的页面文件，至少需要以下内容：

---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---

（5）新建留言板 contact 页面（可选）
contact 页用于展示留言板信息。若博客“source”目录下没有“contact/index.md”文件，需新建一个，命令如下：

hexo new page "contact"

编辑新建的页面文件，至少需要以下内容：

---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---

注：本留言板功能依赖于第三方评论系统，激活评论系统才有效果。且在主题的“_config.yml”文件中，第 19 至 21 行的“菜单”配置，取消关于留言板的注释即可。

（6）新建友情链接 friends 页面（可选）
friends 页用于展示友情链接信息。若博客“source”目录下没有“friends/index.md”文件，需新建一个，命令如下：

hexo new page "friends"

编辑新建的页面文件，至少需要以下内容：

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同时，在博客“source”目录下新建“_data”目录，在“_data”目录中新建“friends.json”文件，文件内容如下所示：

[{
"avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
"name": "码酱",
"introduction": "我不是大佬，只是在追寻大佬的脚步",
"url": "http://luokangyuan.com/",
"title": "前去学习"
},
{
"avatar": "http://image.luokangyuan.com/4027734.jpeg",
"name": "闪烁之狐",
"introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
"url": "https://blinkfox.github.io/",
"title": "前去学习"
},
{
"avatar": "http://image.luokangyuan.com/avatar.jpg",
"name": "ja_rome",
"introduction": "平凡的脚步也可以走出伟大的行程",
"url": "https://me.csdn.net/jlh912008548",
"title": "前去学习"
}]

（7）菜单导航配置
2.7.1 配置基本菜单导航的名称、路径“url”和图标“icon”。菜单导航名称可以是中文或英文，图标可在“Font Awesome”中查找。例如：

menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle
Friends:
url: /friends
icon: fas fa-address-book

2.7.2. 二级菜单配置方法：若需要二级菜单，可在原基本菜单导航的基础上进行以下操作。在需要添加二级菜单的一级菜单下添加“children”关键字，在“children”下创建二级菜单的名称“name”、路径“url”和图标“icon”。注意每个二级菜单模块前要加“-”，注意缩进格式。例如：

menu:
Index:
url: /
icon: fas fa-home
Tags:
url: /tags
icon: fas fa-tags
Categories:
url: /categories
icon: fas fa-bookmark
Archives:
url: /archives
icon: fas fa-archive
About:
url: /about
icon: fas fa-user-circle-o
Friends:
url: /friends
icon: fas fa-address-book
Medias:
icon: fas fa-list
children:
- name: Musics
url: /musics
icon: fas fa-music
- name: Movies
url: /movies
icon: fas fa-film
- name: Books
url: /books
icon: fas fa-book
- name: Galleries
url: /galleries
icon: fas fa-image

（8）添加 emoji 表情支持（可选的）
本主题新增了对 emoji 表情的支持，使用“hexo-filter-github-emojis”的 Hexo 插件来支持 emoji 表情的生成，安装命令如下：

npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的“_config.yml”文件中，新增以下配置项：

githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:

执行“hexo clean && hexo g”重新生成博客文件，即可在文章中看到用 emoji 语法写的表情。

**（9）代码对原文进行了重新梳理和组织，尽量保持原文的结构和主要内容，但在语言表达上进行了优化和调整。对于一些较为复杂的安装步骤和配置内容，进行了分段和更清晰的阐述，使其更易于阅读和理解。同时，对一些专业术语和命令进行了适当的解释和说明，方便读者更好地掌握相关知识。此外，对一些可选的配置步骤进行了明确标注，让读者可以根据自己的需求进行选择和操作。