【背景】

我是一名学财务的文科生，没有任何计算机基础，但是喜欢写文章，之前都是在微信公众号上写，但是有诸多限制，于是萌生了想搭建一个自己的博客的念头。我把我的想法告诉了我的一个朋友（姑且称他为X君吧），X君帮我搭建了一个网站，并把过程写了一个简单的教程并讲给我听。我根据X君的教程和讲解，自己也把环境搭建起来了。在这里做一个记录。算是在新博客网站中的第一篇文章吧。

【目标】

  1. 使用nodejs的hexo搭建本地博客系统
  2. 使用git进行版本管理（和小伙伴们协同工作的必备良兔（tool））
  3. 使用github进行代码托管（X君告诉我自己写的东西可以上传到这个网站，可以当作一个本地的备份，也可以随时随地工作，但是要注意隐私问题）
  4. 使用github Page作为博客网站的访问（X君说这是一个免费的个人网页托管服务器，不是很懂，反正就是能通过他自定义并在公网上访问自己的文章）

【小白科普】

  1. 运行环境
    • 任何软件的运行都需要环境，比如win10需要在笔记本电脑上运行，andriod需要在手机上运行；笔记本电脑和手机就是win10和android这俩软件的运行环境。
    • 操作系统是一个特殊的软件，他们为其他软件的运行提供环境，比如QQ、微信都需要安装在win10、ios或android操作系统上才能运行，只不过他们要求的格式不一样，win10可以运行exe软件，ios可以运行dmg文件，andriod运行pkg文件等。
    • 针对那些没有可视化交互界面的软件，操作系统会给他们提供一个特殊的运行环境。比如win10的cmd运行环境，mac的bash环境，androi也有只不过我们在手机上不常用。（不太好理解，但是可以类比win10需要笔记本电脑提供环境，QQ需要win10操作系统提供环境，python等没有界面的软件需要cmd提供环境一样类比着理解）。
    • python、nodejs、mysql等这些都是没有可视化交互界面的软件，所以需要我们在cmd或者bash中运行（X君说python和nodejs也有图形交互界面，但是为了让我更好的理解这些概念，所以就不推荐我使用）。
  2. 环境变量
    • 上面提到了运行环境，但是我按X君的教程搭建环境的时候，经常提示某某文件后文件夹找不见，于是X君又给我普及了环境变量的概念。
    • 当我们使用cmd或bash运行一个软件时，会以以下顺序执行：
      • 首先会在当前目录中寻找是否有该软件（例如python.exe）；
      • 如果没有则会在当前用户的PATH环境变量指定的所有目录中按先后顺序循环寻找，如果找到了就直接运行，不再往下找。这个PATH就是一个环境变量（可以理解为一个字符串），存放了一堆的文件夹目录，win10是以“;”隔开，mac是以“：”隔开，大概长下面这个样子。
        1
        /Users/abbywalker/opt/anaconda3/bin:/Users/abbywalker/opt/anaconda3/condabin:/Library/Frameworks/Python.framework/Versions/3.8/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/mysql/bin
      • 如果还没有则会继续在系统的PATH环境变量指定的所有目录中按先后顺序循环寻找
      • 如果还是找不到，就会报错提示某某文件后文件夹找不见
  3. 运行软件的5个方法
    • 根据上面环境变量的介绍，运行软件可以有5种方法
    • 直接到该软件的安装目录下运行 （对应于环境变量中的当前目录）
    • 把该软件的安装目录加入到该用户的PATH变量中（具体方法后面讲）
    • 在当前运行的cmd或bash中临时指定，而不影响其他的程序运行（X君建议使用这种方法，这样可以同一个电脑安装多版本的软件，比如同时安装python2.7和3.7，通过这种方法临时指定当前运行的环境而不影响其他程序）（具体方法后面讲）
    • 把该软件的安装目录加入到系统的PATH变量中（具体方法后面讲）
    • 直接指定该软件安装目录的绝对路径进行执行，例如:
      1
      2
      >/usr/local/mysql/bin/python #mac的bash环境
      >d:\soft\pytthon\python.exe #win10的cmd环境

好了，小白科普到此结束，下面进入本文正题。

【环境准备】

  1. 安装git
  2. 安装nodejs
  3. 安装hexo
  4. github搭建源文件个人仓库
  5. github设置多Page（默认一个账户只能有一个主页Page）
  6. 生产SSH并添加到github
  7. 将hexo发布到github
  8. 页面访问（本地预览和公网访问）

PS：X君用的是windows，我用的是mac所以教程会写两份。

安装git

  1. windows的比较简单，直接下载软件，一路下一步即可；
  2. mac上安装稍微复杂一点，安装过程记录以下；
    • 百度搜索 mac git安装，会提示到 git-scm去安装
    • 页面是英文的，按第一个教程，先安装homebrew,按照homebrew官网的提示，第一种方法直接安装,/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"需要翻墙 【失败】，按官网第二种方法，先下载下来，然后解压，会报错，好不容易解压出来了，运行依然会报错。【失败】。建议大家不要按这个方法安装，当然有兴趣的可以自己尝试。
    • 鉴于homebrew的教训，所以XCode的方式，我也没有尝试。
    • 直接使用第三种方式，Binary installer，下载sourceforge编译好的安装包，虽然不是最新版，但是不影响咱们的使用。直接下载zip文件，解压出dmg文件，安装即可。

安装nodejs

  1. windows和mac上都比较简单，直接下载软件，一路下一步即可；

安装hexo

    windows和mac是一样的

  1. 在nodejs环境中（cmd或者bash）安装hexo包 
    1
    npm install -g hexo-cli
  2. 测试hexo是否成功
    • 初始化
      1
      hexo init myBlog
    • 安装基础环境包 
      1
      2
      cd myBlog
      npm install

执行成功后，myBlog文件夹的结构如下: 

1
2
3
4
5
6
7
8
myBlog
├── _config.yml # 网站的配置信息，您可以在此配置大部分的参数。 
├── package.json
├── scaffolds # 模版文件夹
├── source  # 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹
|   ├── _drafts # 草稿文件
|   └── _posts # 文章Markdowm文件 
└── themes  # 主题文件夹
  • 本地启动hexo服务器进行测试 
    1
    hexo s
        在浏览器中输入http://localhost:4000，如果看到如下效果，则证明hexo环境搭建成功:

github搭建个人源码仓库

根据X君的建议，为了保证隐私安全和版权，自己写的博客的源文件单独保存在一个github仓库里，供自己使用；把hexo编译后的发布版本保存在另外一个github仓库里,通过github Page供大家访问。

  1. 注册github（略）。
  2. 登录github（略）
  3. 新建个人仓库 （建议私人库）
  4. 导出个人仓库
    1
    git clone https://github.com/unclevicky/myBlogSrc.git .
  5. 把刚建立的myBlog文件下的所有内容放到刚导出的github目录，然后再提交
    1
    2
    git commit -m "第一次提交我的blog"
    git push

github设置多Page

  1. 直接使用github个人主页

  2. 利用每个项目的GitHub Pages实现多主页访问

    • 新建一个仓库项目，方法同上
    • 输入项目名称等信息(建议公开项目,不公开也行其实)，截图里用的名字是”myBlogPub”，写教程的时候已经改成了”rabbitBear”。可根据需要自己修改。
    • 在github中配置页面，向下滚动设置项目GitHub Pages信息
    • 记住两个地址

生产SSH并添加到github

  1. 配置一个SSH绑定到github，SSH一个是私钥，一个是公钥，私钥保存到个人本地（千万别泄露），公钥配置到github上。（不太懂，反正类似我党当年在小黑板上登一个报纸-公钥，每个人拿自己的暗号-私钥，去破解想要的信息一样。同一份报纸，每个人私钥不同，获取的情报也不同一样。姑且这理解吧）。

  2. 回到本地的git环境,设置github用户的全局用户和邮箱，如果已设置可以忽略。

    1
    2
    3
    # 使用以下语句检测是否设置，如果返回为空，则证明未设置
    git config user.name
    git config user.email
    1
    2
    3
    # 如果没设置，则使用下面两句话设置即可
    git config --global user.name "yourname"
    git config --global user.email "youremail"

  3. 然后创建SSH,使用以下语句，然后一路回车

    1
    2
    3
    4
    5
    # windows的话使用cmd环境,xxxx是你的windows用户
    cd c:/users/xxxx/.ssh/ 
    # mac的话使用bash环境,$HOME也是一个环境变量（参考上面），指向当前用户的home目录
    # cd $HOME/.ssh/
    ssh-keygen -t rsa -C "youremail"

  4. 将SSH的公钥，绑定到github上。

    • 打开上面的id_rsa.pub文件，把所有的内容拷贝下来
    • 粘贴到github的SSH里面

  5. 在本地cmd或bash环境测试秘钥是否成功

    1
    2
    3
    4
    5
    # windows的话使用cmd环境,xxxx是你的windows用户
    cd c:/users/xxxx/.ssh/ 
    # mac的话使用bash环境,$HOME也是一个环境变量（参考上面），指向当前用户的home目录
    # cd $HOME/.ssh/
    ssh -T git@github.com

    如果，显示Hi unclevicky! You've successfully authenticated, but GitHub does not provide shell access.,说明成功了。

  6. 不成功的可能原因

    • 如果不成功，加入-v参数，则使用以下命令，查看失败原因
      1
      ssh -T -v git@github.com
    • X君第一次也失败，使用-v查看调试信息之后发现，是找不到秘钥。这个问题，是绝对路径和相对路径造成的，所以在.ssh的目录下，新建一个config的文件，制定秘钥的绝对路径即可: 
      1
      2
      3
      4
      5
      6
      Host github.com
      User xxxx@xx.com # 你的邮箱地址
      Hostname ssh.github.com
      PreferredAuthentications publickey
      IdentityFile C:\\Users\\xxxx\\.ssh\\id_rsa # 你的私钥的保存路径和名字
      Port 443

将hexo发布到github

  1. hexo本地环境测试【√】；github Page完成【√】；ssh配置完成【√】。剩下就是修改hexo的配置文件，然后发布到github page上，即可访问。
  2. 修改hexo博客目录的配置文件**_config.yml**,找到 “url:” 和 “deploy:”

    特殊说明：

    • 如果github使用的“直接使用github个人主页”方法，根据上面让记住的连接，url和deploy的配置为：

1
2
3
4
5
6
7
8
9
url: https://unclevicky.github.io
root: /
...
...

deploy:
  type: git
  repo: https://github.com/unclevicky/unclevicky.github.io.git

  • 如果github使用的“项目的GitHub Pages实现多主页”方法，根据上面让记住的连接，url需要指定具体的项目名称，url和deploy的配置为： 

1
2
3
4
5
6
7
8
9
10
url: https://unclevicky.github.io/rabbitBear/
root: /rabbitBear
...
...

deploy:
  type: git
  repo: https://github.com/unclevicky/rabbitBear.git
...
...

项目的GitHub Pages实现多主页的配置如下

1
2
3
4
5
6
7
8
9
# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: https://unclevicky.github.io/rabbitBear/
root: /rabbitBear
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
1
2
3
4
5
6
7
8
# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/unclevicky/rabbitBear.git
  branch: main
  1. 在本地执行hexo的编译和发布命令，则可成功发布到github上
    1
    2
    hexo clean # 删除以前的发布
    hexo g -d  # 重新编译生成，并按配置文件中的github信息，发布到对应的网站上

公网访问访问博客主页

  1. 直接个人主页方式
    https://xxxx.github.io/，xxxx是你的github用户名
    例如：https://unclevicky.github.io/
  2. 项目多主页方式
    https://xxxx.github.io/yyyy/，xxxx是你的github用户名,yyyy是你的项目名
    例如：https://unclevicky.github.io/rabbitBear/

修改博客样式

  1. 默认的样式不是很好看，可以自己DIY样式和功能，比如统计访问量、设置分类、增加订阅、回复等功能，这也是为什么要搭建自己模块的原因。DIY！
  2. 当然也可以使用网上那些达人们已经diy好的样式，比如X君给我推荐的buterfly这款样式。
    • 下载样式到博客的themes目录，在线安装和手工下载都可以。以butterfly为例
      1
      2
      3
      4
      5
      # 在cmd或bash下执行
      # 下载并安装样式文件
      npm i hexo-theme-butterfly
      # 下载并安装该样式需要的插件，每个样式需要的插件不一样，根据实际需要来，否则有些样式显示不出来
      npm install hexo-renderer-pug hexo-renderer-stylus --save
  3. hexo博客目录的配置文件**_config.yml**，找到”theme”，修改成刚下载的”butterfly”
    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: butterfly
  4. 最终效果如下

写新博客

  1. 在源文件的根目录执行，hexo new xxxx,xxxx是博客名称，支持中文。例如:hexo new 博客基础环境搭建（非常详细）。
  2. 则在博客的”source/_posts/“目录下生产一个，同名的.md文件，例如”hexo博客基础环境搭建（非常详细）.md”，此文件就是我们的博客源文件，修改此文件，把博客内容写进去，然后使用前面提到的,hexo clean hexo g -d,即可完成编译和发布。
  3. .md是markdown语言写的文件，非常简洁和灵活，至于如何使用.md文件写博客，将在后续的博客中陆续更新。本篇文章即是用此方法编写完成。对于我这个新手来说，入门还是比较简单的。

The End！ Have Fun！