个人博客搭建操作流程

本系列将记录自己按照网络上的资源与教程第一次搭建自己的个人博客的全过程，将过程与自己搭建时的心得记录下来，为以后反看自己成长经历留下痕迹，也希望如果可以的话，帮助到其他想要尝试搭建自己个人博客的朋友。

本文基于 Windows 10 系统，且默认已有 GitHub 账号以及安装下载好 git。

若还没有 GitHub 账号，可参考这篇博文注册最新 GitHub 账号注册（详细图解——CSDN。

git 的下载安装可参考这篇博文进行下载安装 Git 详细安装教程（详解 Git 安装过程的每一个步骤）——CSDN。

绑定 GitHub

为了方便向 GitHub 的仓库上传文件，我利用 SSH（安全外壳协议，Secure Shell 的缩写）绑定 GitHub 并提交文件，这样既方便快捷，又安全可靠。详细了解 SSH 协议可参考这篇文章详述 SSH 的原理及其应用——CSDN。

1. 绑定 GitHub

利用 git 上传文件到 GitHub 首先得利用 SSH 登录远程主机，有两种登录方式：口令登录和公钥登录。口令登录需每次输入密码，较为麻烦，公钥登录省去了输入密码的步骤，更为快捷方便一些。所以我才用了公钥登录的方式。

首先需要在 GitHub 上添加 SSH key 配置，如果已经安装好 Git Bash，应该会自带有 SSH，可以在 Git Bash 中输入 ssh 命令来检查一下本机是否安装。

在这里插入图片描述

如上图所示，即已经成功安装 SSH。

接着输入命令 ssh-keygen -t rsa （注意空格），表示指定 RSA 算法生成密钥，然后按四次回车键，会生成两个文件，分别为秘钥 id_rsa 和公钥 id_rsa.pub. 根据 Git Bash 上显示的目录找到所述文件。（注意：git 中的复制粘贴不是 Ctrl+C 和 Ctrl+V，而是 Ctrl+insert 和 Shift+insert.）

如果根据目录找不到也没关系，可以直接在 Git Bash 中输入以下指令

1
2
3

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

接下来我们要做的事情就是把公钥 id_rsa.pub 的内容添加到 GitHub。复制公钥 id_rsa.pub 文件里的内容，进入到自己的 GitHub 主页，点击右上角的头像，再找到 Setting 点击。

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 (img-ITLGI3EM-1629089994573)(C:\Users\79485\Pictures\个人博客流程\QQ 截图 20210815194146.jpg)]$

将刚才复制的公钥填写到下面 Key 的大框里，上面是标题，可填可不填，最后点击下面的 Add SSH key 。

在这里插入图片描述

然后我们可以通过 Git Bash 中输入 ssh -T git@github.com 进行检验是否验证成功，第一次会询问，填写 yes，回车就好。

### 2. 提交文件

提交文件有两种方法：

① 本地没有 git 仓库

直接将远程仓库 clone 到本地；

将文件添加并 commit 到本地仓库；

将本地仓库的内容 push 到远程仓库。

② 本地有 Git 仓库，并且已经进行了多次 commit 操作

建立一个本地仓库进入，init 初始化；

关联远程仓库；

同步远程仓库和本地仓库；

将文件添加提交到本地仓库；

将本地仓库的内容 push 到远程仓库。

下面展开详细讲解一下两种方法如何使用：

① 本地没有 git 仓库：

首先进入自己的 GitHub 主页，创建一个新项目，我这里将新项目命名为《First-Demo》，点击进入

在这里插入图片描述

点击 Code，再点击SSH，点击网址后面的复制图标将路径复制。

然后打开 Git Bash 进入到自己准备存储 Git 仓库的目录

这里进入是时我出现了 “bash: cd: too many arguments” 的错误，是因为路径中包含了空格导致的，只需要将路径中有空格的部分用双引号包起来就可以解决了。

在这里插入图片描述

这样就进入到仓库所在目录，然后运行命令 git clone git@github.com:7948…（把刚刚复制的地址粘贴过来），将远程仓库 clone 到本地。

上图就证明 clone 成功了，我们可以打开仓库所在的目录，检验一下是否 clone 正确，可以看到本地内容与 GitHub 上的内容完全一致。

接下来我们在本地的仓库新建一个文件，然后从此目录进入 Git Bash，输入 git status 命令查看仓库状态：

可以看到我们刚刚新建的文件并没有被追踪，现在用 git add 命令将文件添加到「临时缓冲区」，再用 git commit -m “提交信息” 将其提交到本地仓库，如下图：

然后就可以输入 git push origin master 命令，将本地仓库提交到远程仓库，origin 是远程主机的名字

此时再看 GitHub 主页上仓库里已有我们更新提交的文件了

② 本地有 Git 仓库，并且已经进行了多次 commit 操作

首先，我们建立一个本地仓库 secondDemo，使用 git init 命令初始化这个仓库

输入 git remote add origin git@github.com:7948…命令，关联远程仓库，接着输入 git pull origin master 命令，同步远程仓库和本地仓库 git

然后我们打开本地仓库就可以看到，和远程仓库中的内容一致了，接下来的操作与第①种方法大同小异，add、push、commit 等操作。

3. 购买域名

搭建自己的个人博客网站，当然需要一个专属于自己的域名啦，我本人的域名是在阿里云的万网购买的，首年还有优惠，先查询一下自己心仪的域名能否使用，接下来需要在阿里云注册账号，就可以购买一个属于自己的域名啦！

4. 安装 node.js

更新：

先下载 nvm (node.js version management)，顾名思义是一个 nodejs 的版本管理工具。通过它可以安装和切换不同版本的 nodejs。方便之后的操作，可以点击此处下载 nvm，下载 Windows 版本

nvm-noinstall.zip：绿色免安装版，但使用时需进行配置。
nvm-setup.zip：安装版，推荐使用

下载好之后一路 next 安装完成，打开 CMD，输入命令 nvm -v，若出现以下界面则证明安装成功：

接下来输入命令 nvm install 14.17.5 即可安装 14.17.5 版本的 node.js 和 npm。

之后输入命令 nvm use 14.17.5，即可使用该版本的 node 与 npm

以下附上常用的 nvm 命令：

nvm arch ：显示 node 是运行在 32 位还是 64 位。
nvm install <version> [arch] ：安装 node， version 是特定版本也可以是最新稳定版本 latest。可选参数 arch 指定安装 32 位还是 64 位版本，默认是系统位数。可以添加–insecure 绕过远程服务器的 SSL。
nvm list [available] ：显示已安装的列表。可选参数 available，显示可安装的所有版本。list 可简化为 ls。
nvm on ：开启 node.js 版本管理。
nvm off ：关闭 node.js 版本管理。
nvm proxy [url] ：设置下载代理。不加可选参数 url，显示当前代理。将 url 设置为 none 则移除代理。
nvm node_mirror [url] ：设置 node 镜像。默认是 https://nodejs.org/dist/。如果不写 url，则使用默认 url。设置后可至安装目录 settings.txt 文件查看，也可直接在该文件操作。
nvm npm_mirror [url] ：设置 npm 镜像。https://github.com/npm/cli/archive/。如果不写 url，则使用默认 url。设置后可至安装目录 settings.txt 文件查看，也可直接在该文件操作。
nvm uninstall <version> ：卸载指定版本 node。
nvm use [version] [arch] ：使用制定版本 node。可指定 32/64 位。
nvm root [path] ：设置存储不同版本 node 的目录。如果未设置，默认使用当前目录。
nvm version ：显示 nvm 版本。version 可简化为 v。

旧：

下载地址：node.js 官网

点击左面的按钮下载，点击安装包进行安装，详细的安装过程以及环境变量的配置可以参考这篇文章[node.js 安装详细步骤教程 ](https://blog.csdn.net/antma/article/details/86104068)

5. 安装 Hexo

Hexo 就是我个人博客网站的框架，在安装前，先在 GitHub 新建一个仓库

仓库名称设置为“用户名+github.io”

然后就是安装 Hexo 了，首先在 D 盘新建文件夹“Blog”，打开命令行进入“D:\Blog” ，然后输入命令安装 Hexo：

1	npm install -g hexo-cli

安装完成后输入 hexo init 命令初始化博客：

然后输入 hexo g 静态部署：

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

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

最后记得要 ctrl + c 停止运行服务器。

6. 将 Hexo 部署到 GitHub

在 Blog 文件夹中找到_config.yml 文件，用记事本打开，下滑到最底部，添加如下内容：

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

仓库地址在这里：

然后还是在命令行中进入 D:/Blog，安装 Git 部署插件，输入命令：

1	npm install hexo-deployer-git --save

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

1
2
3

hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g       #生成网站静态文件到默认设置的 public 文件夹 (hexo generate 的缩写)
hexo d       #自动生成网站静态文件，并部署到设定的仓库 (hexo deploy 的缩写)

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

7. 解析域名

到了这一步，虽然已经可以通过 GitHub 提供的网址访问我们的网页，但是我们想要通过之前购买的专属自己域名来访问，接下来就是绑定自己的域名。

第一步：首先需要解析域名，登陆万网后点击控制台进入域名控制台，在你购买的域名后点击解析：

之后添加两条解析记录，内容如下：

其中第一条那个 IPV4 地址可以通过 ping 得到，具体方法是：打开 cmd 输入下面命令：

1	ping mayByt.github.io #ping + 你的 GitHub 的网址

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

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

1
2
3

hexo clean
hexo g
hexo d

接着等待执行完毕后，打开 GitHub 上仓库，可以看到 CNAME 文件已经在项目中了，接着点击 Setting ，打开 Pages ,查看自己的域名已经被保存了。

现在，就可以直接在网址栏输入自己的域名访问自己的博客主页啦。

至此个人网站搭建好了，接下来要做的就是美化个性化定制自己的网站了，我个人博客的制作过程将在下一篇文章中记录。

更新~

因为 Hexo 是生成好静态网页上传 git ，这样导致在其他设备上无法自由更新编辑自己的网站，并且源代码无法上传 git ，一旦本机数据发生意外，可能导致自己的网站心血付之东流，因此为我的个人博客添加 git 版本管理。

首先在 GitHub 新建一个 Blog 仓库：

[]

然后在本地的网站根目录 Blog 下的 .gitignore文件（若没有则新建一个）里添加 git 时忽略的文件，一般是一些编辑器的配置文件等：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.vscode/
.idea/
/.idea/
.deploy_git*/
.idea
themes/butterfly/.git

接着初始化 git 仓库，在本文件夹下 Git Bash 以下命令：

git init

添加当前目录下的所有文件到暂存区：

git add .

提交初始化仓库到本地：

1	git commit -m "初始化仓库"

接着推送到远程的仓库：

1
2
3

git branch -M main
git remote add origin https://github.com/mayByt/blog.git
git push -u origin main

这样就操作完成啦，就不用担心会遗失自己的源代码，并且可以多终端编辑自己的网站啦~