建一个自己的博客网站

主要参考两篇网站文章：

1. 从零开始搭建个人博客（超详细）
2. 快速搭建个人博客 —— 保姆级教程

1、相关软件

1.1 Git

download，一个简单教程

1.2 Node.js

下载地址：node.js官网
用系统管理员身份登录cmd，然后输入如下命令安装：

msiexec /package "D:\Download\node-v24.16.0-x64.msi"

安装完成后，可以在 cmd 中输入 node -v 和 npm -v 命令检查版本

如上图，直接点击下载，完成后双击安装，安装直接默认 next 就好，很简单，需要改的也就是安装位置改一下，我是在D盘新建了一个文件夹 nodejs，安装在这个文件夹里。如果要看详细到每一步的话，可以看一下这个文章：node.js 安装详细步骤教程。

安装完成可以用打开 cmd 检验一下是否安装成功，用 node -v 和 npm -v 命令检查版本，如下图：

1.2.1 设置npm在安装全局模块时的路径和环境变量

因为如果不设置的话，安装模块的时候就会把模块装到C盘，占用C盘的空间，并且有可能安装好 hexo后却无法使用，所以我们需要设置一下：

在 nodejs 文件夹中新建两个空文件夹 node_cache、node_global，如下图：

打开 cmd，输入如下两个命令：

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

设置环境变量：**win10系统 –> 打开控制面板 –> 系统 –>高级系统设置 –> 环境变量 ，**然后在系统变量中新建一个变量名为“NODE_PATH”，值为“D:\nodejs\node_global\node_modules”，如下图：

然后编辑用户变量里的Path，将相应npm的路径改为：D:\nodejs\node_global，如下图：

1.2.2 测试

在 cmd 命令下执行 npm install webpack -g

然后 webpack 这个模块已经在我们设置默认的文件夹中了：

1.3 Hexo

1.3.1 安装

安装完 Node.js 后，便可以在 GIT-Bash-here 打开 termimal，然后输入 npm install -g hexo-cli 安装 hexo。
安装完成后，输入 hexo init 命令初始化博客：

根文件目录下多了这些文件

简单介绍下hexo的文件结构：

• public 最终所见网页的所有内容
• node_modules 插件以及 hexo 所需 node.js 模块
• _config.yml 站点配置文件，设定一些公开信息等
• package.json 应用程序信息，配置hexo运行所需js包
• scaffolds 模板文件夹，新建文章，会默认包含对应模板内容
• themes 存放主题文件，hexo根据主题生成静态网页（速度贼快）
• source 用于存放用户资源（除 _posts 文件夹，其余命名方式为 “+ 文件名” 的文件被忽略）

我们日常写文的操作都在 source/_post 下。然后输入 hexo g 静态部署：

这时网页已经部署完成，输入 hexo s 命令可以查看：

浏览器输入 http://localhost:4000 就可以打开新部署的网页：

看完之后 ctrl +c 停止运行服务器。

hexo clean    # 执行此命令后继续下一条  
hexo g        # 生成博客目录  
hexo s        # 本地预览

1.3.2 在 Github 上建一个代码仓

在 GitHub上创立一个仓库，如下图：

保证仓库 public，名称填写正确 用户名.github.io，系统自动变更为 Pages
点击 settings 设置：

滑到页面底端，出现如下图所示就说明已经成功了：

1.3.3 将 Hexo 部署到 GitHub

现在回到我们的 Blog 文件夹，用笔记本打开 ** _config.yml ** 文件，如下图：

下滑到文件底部，填上如下内容：

deploy:
  type: git
  repository: https://github.com/fengye97/fengye97.github.io.git  #你的仓库地址
  branch: master

注意空格：

注意，在最新的 Github 上，branch 可能为 main（而不是 master）；以及 repository 改用 ssh 的连接: git@github.com:fengye97/fengye97.github.io.git
你的仓库地址就是下图这个：

然后回到 Blog 文件夹中，打开 Git Bash，安装Git部署插件，输入命令：

npm install hexo-deployer-git --save

然后分别输入以下四条命令：

hexo clean   # 清除缓存文件 db.json 和已生成的静态文件 public
hexo g       # 生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)，生成博客目录
hexo s       # 本地预览（可选）
hexo d       # 自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

完成以后，打开浏览器，输入 https://xxx.github.io 就可以打开你的网页了：

现在虽然可以访问我们的网站，但是网址是GitHub提供的：http://xxxx.github.io, 而我们想使用我们自己的个性化域名，这就需要绑定我们自己的域名。

2、Git 绑定 GitHub

链接
我们要用git上传文件到GitHub首先得利用SSH登录远程主机，而登录方式有两种：一种是口令登录；另一种是公钥登录。口令登录每次都要输入密码十分麻烦，而公钥登录就省去了输入密码的步骤，所以我们选择公钥授权。首先我们得在 GitHub 上添加 SSH key 配置，要想生成SSH key，就要先安装 SSH，不过我们安装了 Git Bash，其应该自带了 SSH。检验一下是否安装 SSH，我们在新建的文件夹中右键打开 Git Bash：

输入 ssh 命令，查看本机是否安装 SSH：

如上图所示，即已安装 SSH。然后，输入 ssh-keygen -t rsa 命令 （注意空格），表示我们指定 RSA 算法生成密钥，然后敲四次回车键，之后就就会生成两个文件，分别为秘钥 id_rsa 和公钥 id_rsa.pub （注意：git中的复制粘贴不是 Ctrl+C 和 Ctrl+V，而是 Ctrl+insert 和 Shift+insert）。文件的位置在 Git Bash 上面都有显示，默认生成在以下目录：

• Linux 系统：~/.ssh
• Mac 系统：~/.ssh
• Windows 10 ：C:/Users/账户名/.ssh

接下来我们要做的事情就是把公钥 id_rsa.pub 的内容添加到 GitHub。复制公钥 id_rsa.pub 文件里的内容，你可以通过目录找到 id_rsa.pub 文件的位置，用记事本打开文件复制。如果你实在找不到文件也没有关系，按照以下步骤直接在 Git Bash 上打开就行：

$ cd ~/.ssh 
$ ls
$ cat id_rsa.pub

（再次注意：git中的复制粘贴不是 Ctrl+C 和 Ctrl+V，而是 Ctrl+insert 和Shift+insert） 接下来进入我们的 GitHub 主页，先点击右上角，再点击 settings ：

如下图，先点击 SSH and GPG keys，再点击 New SSH key。

将复制的公钥 id_rsa.pub 的内容粘贴到 key 内，再点击 Add SSH key，如下图：

验证是否成功，我们可以通过在 Git Bash 中输入 ssh -T git@github.com 进行检验：

第一次会出现这种情况，填 yes 就行，若出现下图中的情况，则表明绑定成功：

3、Git 提交文件到 Github

提交文件有两种方法：

第一种：本地没有 git 仓库
	1. 直接将远程仓库 clone 到本地；
	2. 将文件添加并 commit 到本地仓库；
	3. 将本地仓库的内容push到远程仓库。

第二种：本地有 Git 仓库，并且我们已经进行了多次 commit 操作
	 1. 建立一个本地仓库进入，init 初始化；
	 2. 关联远程仓库；
	 3. 同步远程仓库和本地仓库；
	 4. 将文件添加提交到本地仓库；
	 5. 将本地仓库的内容 push 到远程仓库。

第一种方法详细步骤

首先，进入GitHub个人主页：

点击进入我新建的 text 项目：

点击 Clone or download，再复制地址，然后进入我们准备存储 Git 仓库的目录，如下图：

接下来，输入 git clone https://github.com/fengye97/text.git （注意，使用 https 克隆的话，首用户名和密码登录可能会失败，最好使用 SSH 登录 git clone git@github.com:fengye97/text.git），将远程仓库 clone 到本地，如下图：

我们看看 clone 到本地的仓库内容与远程仓库的内容，是否完全一致：

现在我们创建一个 text.txt 测试文件，如下图：

从此目录进入 Git Bash，输入 git status 命令查看仓库状态：

text 已经是一个 Git 仓库了，而我们刚刚创建的文件 text.txt 没有被追踪，也就是没有提交到本地仓库。现在我们使用 git add 命令将文件添加到了「临时缓冲区」，再用 git commit -m "xxx" 将其提交到本地仓库，如下图：

如果你是第一次提交的话，就会出现下图的情况，会让你输入用户名和邮箱：

#你只要再加两行代码就行：
$ git config --global user.name"fengye97"
$ git config --global user.email"***@***.com"

完成后输入 git log（或 git log --online --graph --decorate）命令查看仓库提交日志：

再输入 git status 查看一下仓库状态：

现在输入 git push origin master 命令，将本地仓库提交到远程仓库，origin是远程主机的名字：

第一次上传需要输入密码，验证成功后，如下图：

刷新 GitHub 中 text 仓库：

这时我们的测试文件已经上传到了 text 仓库中。

第二种方法详细步骤

首先，我们建立一个本地仓库 demo，使用 git init 命令初始化这个仓库，如下图:

输入 git remote add origin https://github.com/fengye97/text.git 命令，关联远程仓库，接着输入 git pull origin master 命令，同步远程仓库和本地仓库，如下图：

回到本地仓库，发现我们已经把远程仓库的内容同步到了本地仓库：

接下来的步骤就与第一种方法一样（可以参考上面，已经写得很详细了），先输入 git add 和 git commit -m "xxx" 命令，将要提交的文件添加并提交到 demo 仓库；然后再输入 git push origin master 命令，将本地仓库修改（或者添加）的内容提交到远程仓库就完成啦！！！

4、解析域名

第一步：登录万网，点击控制台，在你已购买的域名后点击解析添加两条解析记录：

第二步：打开 Blog 文件夹里的 source 文件夹，添加CNAME文件，可以先创建一个CNAME.txt文件，打开后写上你的域名，不要加www否则每次访问都必须加www，但如果不带有www，以后访问的时候带不带www都可以访问，保存后记得要重命名，将.txt删除，如下图：

第三步回到 Blog 文件夹，右键打开 Git Bash，依次输入下面三条命令：

hexo clean
hexo g
hexo d

打开GitHub，看看CNAME文件是否已经在你的项目中，点击 settings ：

查看你的网址是否已保存：

如果是空白的看看能不能自己填上去，我的 save 键一直是灰白的不能点击，但我的CNAME文件传上去了之后就自动填上了。如果你没有 CNAME 文件，可以自己添加这个文件，方法如下：

当然也可以不用 CNAME 文件，直接在 Github 的 Pages 中手动添加自己的域名。打开仓库，找到设置，进入pages设置，添加域名

你还可以使用免费的 强制HTTPS。打开这个选项

这样就完成啦！这时候你就可以浏览器直接输入你的域名就会进入你搭建的网页啦！

5、主题

现在博客也搭建好了，但是这样光秃秃的什么也没有不好看，是时候美化一波了！

5.1 更换 next 主题

当前用得最多的是 next主题，那为什么用得多呢？当然是符合大多数人的审美。我使用的是next(v7.7.1)，下载地址：theme-next/hexo-theme-next

打开博客根目录Blog文件夹，右键 Git Bash，输入如下代码将next主题下载到目录 Blog/themes：

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

注意，由于 https 链接的克隆有问题，可以用 ssh 来克隆：

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

打开根目录下的 _config.yml（称为 站点配置文件，注意保存为 UTF-8（无BOM）文件，否则 description 可能出现乱码），修改主题（注意，冒号后都要有空格）：

# Site
title: 枫叶苑  #标题
subtitle: ''
description: 选择有时候比努力更重要     #简介或者格言
keywords:
author: 枫叶     #作者
language: zh-CN     #主题语言
timezone: Asia/Shanghai    #中国的时区

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next   #主题改为next

主题语言主要是看你的 themes/next/language 中的简体中文是 zh-CN 还是 zh-Hans：

next主题有四种，如下图依次为Muse、Mist、Pisces、Gemini（反正我没看出来后两个有什么区别）：

我选的是Gemini，打开目录Blog/themes/next/下的_config.yml（称为主题配置文件），只要将你选的主题前的#删除就行了：

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini    #这是我选的主题

回到根目录打开Git Bash，输入如下三条命令：

hexo clean
hexo g
hexo d

完成后打开你的博客：

问题：改主题为Gemini时，hexo clean，hexo g，hexo d 三个命令完成后主题未改变；

解决办法：删除next下的.git文件夹（这好像是个隐藏文件夹，不需要删除），再上传时修改成功。

附：后来我又发现用 hexo s命令查看网页部署时是成功的，但是 hexo d 部署到 GitHub 上就不行，后来等一会就行了，可能是有延迟。