想搭建一个博客很久了，但最近才着手做了这个事。使用博客记录一下平时自己的学习内容，同时也逼迫自己坚持学习。

这里采用GitHub+Hexo搭建博客，可以选择买一个.com域名(啥域名都被注册了。。退而求其次整个cn吧，还便宜)，这样输入URL比较有逼格。记得提前买域名，因为要实名认证审核。

Git下载

首先需要去注册一个GitHub账号，这步省略不说。之后，需要在本地下载一个GitGub客户端，可以去[Git官网](https://git-scm.com/)进行下载，这里最新版本是2.29.2。

image-20201116092100527

安装过程可以配置一些参数，参考链接[参数配置](https://zhuanlan.zhihu.com/p/103325381)，安装完成后，在空白处点击鼠标右键，会出现如下图标：

image-20201116203201882

之后打开Git控制台，输入git即可显示安装后的git信息：

image-20201116203356662

绑定GitHub及文件管理

绑定

虽然可以直接使用GitHub进行文件的上传，但是并不是很好用，所以这里还是选择将git与我们的GitGub账号绑定，利用SSH进行文件的传输。

Windows下Git的用法 和用Liunx下进行GitGub管理类似，首先得生成SSH公钥。利用公钥的好处在于不用每次都进行用户的登陆，使用便捷。使用Windows下的git生成SSH公钥、私钥和将其添加到GitGub的步骤如下：

  1. 一般来说安装选了Git Bash的话，会默认安装SSH。可以打开终端输入ssh命令来查看本机是否装了SSH，如下可以看出已经装了ssh。

image-20201116215113286

未安装可以用命令apt-get ssh安装
  1. 接着就是对密钥的生成，首先输入ssh-keygen -t rsa命令，表示我们指定RSA算法进行密钥的生成，然后回车后手动输入要保存key的目录和文件，这里不输入选择默认就好(想输入也行，都无所谓)。

image-20201116215903303

这里说明一下在不同系统中，ssh目录的位置：
  • Linux：~/.ssh
  • Mac：~/.ssh
  • Windows 10：C:/Users/username/.ssh
  1. 然后就可以找到我们的公钥，存储在id_ras.pub中，将其内容复制然后添加到GitHub中即可，可以直接利用控制台进行cat进行查看：

image-20201117212024815

  1. 去GitHub添加，在Setting下的SSH Keys中，添加完成后如图：

image-20201117212136519

  1. 紧接着去验证是否成功，键入命令ssh -T git@github.com进行链接，首次验证填yes就好：

image-20201117212409292

文件管理

第一次进行Git仓库的管理，本地是没有git仓库的，这时需要经历如下的步骤，然后使得可以操控远程仓库进行文件管理：
  • 首先直接将远程仓库clone到本地
  • 然后将文件添加并commit到本地仓库
  • 最后将本地仓库的内容push到远程仓库

实际操作如下：

  1. 首先去打开自己的项目，然后查看项目地址，这里我用到了之前已经使用的仓库：

image-20201117212908672

  1. 接着利用git clone 命令将远程仓库clone到本地，用SSH链接和URL链接都行：

image-20201128224437869

  1. clone成功后，找和到本地仓库路径，查看内容是否和远程仓库一致：

image-20201128225757960

  1. 在当前路径下进行的操作，并不能及时反映到本地仓库和远程仓库，还需要将其git add添加到缓冲区，然后git commit提交到本地仓库，最后再push到远程仓库才算完整步骤，具体操作如下：
  • 这里新建一个test.txt的文件作为测试，利用vim编辑test.txt，并随意写入一段内容，然后利用git status命令查看仓库状态：

image-20201128230537086

上述可见，会提示刚刚创建的测试文件test.txt并没有被追踪，所以接下来还需要将文件添加到“临时缓冲区”，然后才能进行commit操作，第一次进行提交操作会提示输入用户名和密码，正常输入后即可完成提交，这里记得在commit时，用-m参数对于提交操作进行描述，方便后续进行日志查看：

image-20201128231603100

  • 想要查看提交状态，课可以使用命令git log进行提交日志的查看：

image-20201128231714178

  • 最后利用命令git push origin master将本地仓库提交到远程仓库，其中origin是远程主机的名字，这里我在提交时遇到一个问题”failed to push some refs to git”

image-20201128232757143

该报错主要问题是在这期间对github上的远程仓库进行了修改，所以要用命令git pull –rebase origin master进行更新，然后再次提交即可成功：

image-20201128233248440

打开github进行查看，确实是提交成功：

image-20201128233347882

  • 另外要想删除一个文件利用git rm命令，具体操作可以参考下图：

image-20201129111140260

其余还有很多操作命令，留待大家自己琢磨。

安装node.js和Hexo

在Node.js官网下载最新的node.js，然后进行安装，傻瓜式Next安装操作，这里注意最好还是安装在C盘之外的盘符中，完成后cmd命令行验证是否有环境变量，验证是否安装成功：

image-20201129181551763

然后我们需要配置一下npm在安装全局模块时的路径和缓存cache的路径。默认情况下，在进行模块安装时，路径为C盘，所以需要手动修改到其它盘。具体操作是：

  • 在node.js的安装目录下，新建两个文件夹node_global、node_cache：

image-20201129185223857

  • cmd中键入命令
1
2
npm config set prefix node_global_path
npm config set cache node_cache_path

image-20201129185538116

  • 在系统变量下新建一个变量，变量名为”NODE_PATH”，变量值为”D:\Program Files\nodejs\node_modules”。并将nmp对应的路径修改为”D:\Program Files\nodejs\node_global”
  • 验证测试，利用命令npm install -g webpack-cli 安装webpack模块进行测试，成功安装后该模块被放在了我们新建的node_global中：

image-20201129191523497

这里要注意，为什么我要安装webpack的CLI，因为在webpack3中，webpack本身和他的CLI都是在一个包中的，但是在最新的webpack4中，这两者被分开了，如果用webpack单独安装，查看版本时会显示如下错误，提示CLI不存在。这种情况下若想使用webpack命令，需要进入“node_modules/.bin/webpack”才能执行命令：

image-20201129201800613

所以需要全局安装webpack-cli，这样就不需要进入bin目录，和之前版本操作就一样了，这里如果已经单独安装webpack了，可以使用如下命令重新安装webpack-cli：

image-20201129202140842

Hexo的安装

  • Hexo是搭建个人博客最常用到的框架，通过npm install -g hexo-cli进行安装。新建一个Blog文件夹，然后Git Bash终端进入Blog目录，键入npm命令安装Hexo，因为有墙的关系，所以经常会安装错误，可以手动修改一下源地址为淘宝的NPM镜像源：
1
2
3
npm config set registry http://registry.npm.taobao.org/
npm install -g hexo-cli
hexo -v
  • 安装完成后输入hexo init命令进行初始化，如果卡在下述提示不动，说明因为墙导致从github下载hexo库出问题，可以选择切换一下手机热点(简单，亲测有效)，或者设置一个github代理：

image-20201129204626379

image-20201129204725555

  • 之后用hexo g进行静态部署：

image-20201129204851432

  • 网页部署完成后，用hexo s命令运行server，然后查看localhost:4000即为博客网页：

image-20201129210202166

image-20201129210058129

将Hexo部署到GitHub

  • 首先我们得去GitHub上创建一个对应的仓库，要注意对于仓库的名称尽量写为 用户名.github.io的形式(一定记住用户名命名)，不然会存在一些问题。因为这个名称会对应博客的网站，而且博客的图片显示有问题(亲测)，所以建议还是用我上面那个方式命名，除非你买个域名。创建成功后拿到仓库地址。

image-20201129230705411

在setting下找到GitHub Pages，将Source设置为master

image-20201129232010727

  • 然后就是将hexo部署到GitHub上，首先找到我们的Blog文件夹，打开_config.yml文件进行编辑：

image-20201129215432862

在文件末尾处添加如下内容，主要是自己的仓库地址：

image-20201129230733432

  • 接下来就是在Git Bash中安装Git部署插件，在Blog下执行npm install hexo-deployer-git –save：

image-20201129220108991

  • 完成后，使用如下三个命令进行部署三步曲：
1
2
3
4
5
hexo clean    //清除缓存文件db.json和已生成的静态文件public
 
hexo generate  //生成网站静态文件到默认设置的public文件夹，可以用 hexo g 缩写
 
hexo deploy   //部署文章，可以用 hexo d 缩写

完成后使用 https://用户名.github.io即可登陆到博客

image-20201129231810031

购买域名并绑定

现在的域名是带了github.io的，比较low，还是尽量花点钱买一个喜欢的域名，这样访问时也比较有逼格。

我这里选择阿里云进行购买，由于我想要的.com域名被注册了。。。只能选个.cn域名了。买域名步骤就不记录了，有钱就行，记得实名认证。

解析域名：

  • 实名认证后，接着就是去解析一下域名，找到应列表中已购买的域名，解析进入：

image-20201130221219736

添加两个记录(主机记录分别为@和www)，其中ip地址为之前的 用户名.github.io的地址，可以去ping一下获取，示例如下：

image-20201130225922939

  • 接着去Blog/source下添加一个CHAME文件，写入域名，这里不加www就可以做到访问不带www也可以访问到：

image-20201130230403385

  • 然后部署三步曲，这是后去GitHub上看，CHAME被添加到了项目中，打开setting，下拉就可以看到域名已被添加了：

image-20201130230901317

如果在项目中没有CHAME文件可以自己手动添加一个，只要保证上述domain中有自己的domain就行。

  • 就这样，输入hskull.cn即可到达我的博客：

image-20201130231735139

更换主题

默认的主题肯定是要换的，这毋庸置疑。hexo有很多开源的主题可以使用，可以自己去进行挑选喜欢的，作为一个技术分享为主的博客，那主题简洁明了就好，所以还是选择了最经典的NexT。(换主题了，推荐Butterfy，就是我现在用的主题，非常好看，真香。)

  • 下载NexT主题,下载最新版本的主题，我下载时为NexT v7.8.0，GitHub地址：/theme-next/hexo-theme-next。

    注：一些教程依旧是NexT V5的版本，其仓库为lissnan，依据官方说法，我们还是使用新版的为好，之前我下的旧版本就有很多错误。

  • 主题的配置都似乎将主题克隆到Blog下的themes目录，所以我们进入Blog目录下，执行如下命令进行克隆：

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

如果出现下述错误：

image-20201201225211259

修改为下述命令再次下载:

1
git clone git://github.com/theme-next/hexo-theme-next themes/next
  • 任何教程中都会提及两份重要的配置文件，名称为 _config.yml，分别为：
    • 位于站点根目录下的站点配置文件，用于网站的基础配置
    • 位于themes目录下的主题配置文件，用于主题相关的配置

当下载好主题后，先进行一个初步配置使得主题上线，看看效果。先打开站点配置文件，修改基础信息和设置主题：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Site
title: hskull   
subtitle: hskull
description: 我的博客
keywords: 
author: hskull
language: zh-Ch       #语言依据主题内languages下存储的语言设置,旧版为zh-Hans
timezone: Asia/BeiJing    #时区，默认依据电脑时间
。。。
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
#theme: landscape
theme: next

然后打开主题的配置文件，搜索Schemes，然后选择一个风格，几个风格介绍如下：

1
2
3
4
Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist - Muse 的紧凑版本，整洁有序的单栏外观
Pisces - 双栏 Scheme，小家碧玉似的清新
Gemini - 新款，似乎用的最多，但看不出和Pisces的区别。。。

image-20201201230559669

  • 使用旧版的hexo后，完成上述配置后，进行部署三步曲，完成后去打开博客，就呈现了如下的效果：

image-20201201232721018

失败了，查询原因后发现时是hexo再5.0之后把swig给删除了，它是JS模板引擎，用于渲染页面，执行命令npm install hexo-renderer-swig下载，之后继续部署，显示成功:

image-20201201233741081

所以建议还是下载hexo 6.x之后版本。

进行到这一步后，你应该已经迫不及待的想发布一篇文章看看了，如果想继续美化界面，可以去参考网上大佬们的教程，这里不再献丑。

发布第一篇文章

  • 使用命令创建文章：
1
2
$ hexo new [layout] <title>    
#这里layout选填，默认为Post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局

该命令会在/sources/_posts下创建一个title.md的文件，然后就可以编辑md文件写自己的文章了。也可以直接将写好的md文件放入对于目录下，配置号下述属性即可。

  • 打开创建的模板md文件，开头可以看见三个模板的配置属性，进行配置：

另外还有一些其它的配置(Scaffold)如下：

参数 描述
layout 布局
updated 更新日期
comment 开启文章的评论功能
categories 分类
permalink 覆盖文章网站
keywords 仅用于 meta 标签和 Open Graph 的关键词（不推荐使用）
  • 接下来hexo s本地测试一下，成功完成文章发布：

image-20201202005452612

你也可以部署三步曲进行部署，然后用域名进入测试，结果一般都是ok的。