Building_Blog

前置步骤：安装VScode，注册Github账号，学会魔法上网

一、前言

1. 什么是Github Page

Github Page是Github提供的一项静态网页托管服务，可以用来搭建个人博客。静态网站是指网页不是由服务器动态生成的，没有传统意义的后端。静态网页有很多好处，比如安全性高，访问速度快，不需要数据库等等。非常适合用来搭建博客。

2. 什么是Hexo

快速、简洁且高效的博客框架，基于Node.js，使用Markdown（或其他渲染引擎）解析文章，支持EJS、Swig、Haml和Jade等模板引擎渲染网页。Hexo拥有强大的插件系统，可以使用很多第三方插件，比如RSS、Sitemap、Google Analytics等。Hexo的主题也非常丰富，可以自己写主题，也可以使用别人写好的主题。

二、本地部署

1. 安装Git

https://git-scm.com/download/win

28Fre.png
无脑下一步就行（想改改路径就自己改，不影响）

2. 安装node.js

https://nodejs.org/en/download/
28AI3.png
同样无脑下一步就行（同样想改路径自己改）

检查一下是否安装成功，在cmd中输入：

node -v
npm -v
git --version

如果显示了版本号，就说明安装成功了。

3. 安装并初始化hexo框架

  • 首先在D盘（除了C盘就行）新建一个文件夹，命名为Blog或者你喜欢的名字
  • 然后打开VScode，点击左上角的File选项，点击open folder，选择刚刚新建的文件夹
  • 然后点击Terminal（终端），选择New Terminal, 然后点击终端右边的下拉菜单，选择Git Bash
    28ICC.png

使用Git Bash喵，使用Git Bash谢谢喵

  • 然后输入

    npm install -g hexo-cli

  • 由于网络的问题，下的比较慢也正常，等待安装完成后输入

    hexo init

  • 这里结束时会报错，不要惊慌，看看报错信息是不是让你npm install，是就没问题。初始化完成后输入：

    npm install

4. 本地启动

  • npm组件安装完成后依次输入以下命令：

    hexo g
    hexo s

  • 这个时候会出现：

    INFO Start processing
    INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

  • 然后按住ctrl并点击这个网址，就会自动打开浏览器，这个时候就可以看到刚刚搭好的博客的框架了。

5. 第一篇文章

  • 接着在终端中按住ctrl+c，就会停止服务，然后输入：

    hexo new post 随便起个名字

  • 这样就会在你的source文件夹下生成一个新的文件夹，里面有一个md文件，这就是你的第一篇文章了，打开它，就可以开始写文章了。随便写点东西然后ctrl+s保存
  • 第一篇文章保存后回到终端，依次输入：

    hexo cl
    hexo g
    hexo s

  • 然后在浏览器中刷新就可以看到你的第一篇文章了。但是这个时候你的博客还是在本地，别人是看不到的，下面就是部署到Github上了。

三、GitHub部署

1. 设置用户名的邮箱

  • 在VScode的终端中输入以下两条命令，，然后一路回车：

    git config --global user.name “你的用户名”
    git config --global user.email “你的邮箱”

2. 添加SSH密钥

  • 首先创建SSH密钥，终端中输入以下命令然后 一路回车 ：

    ssh-keygen -t rsa -C “你的邮箱”

  • 然后找到密钥：
    • 在C:\Users\你的用户名.ssh文件夹里面，里面有两个文件，一个是id_rsa，一个是id_rsa.pub，用记事本打开id_rsa.pub，复制里面的内容
  • 最后添加密钥：
    2DFuR.png
    • 登录Github，点击右上角头像，选择Settings，选择左边栏的SSH and GPG keys，点击右上角的New SSH key，然后在Title中随便起个名字，粘贴复制的 id_rsa.pub 内容到 Key 中，然后点击Add SSH key

3. 验证连接

  • 在VScode的终端中输入

    ssh -T git@github.com

  • 出现Are you sure……”，输入 yes 回车确认
  • 见到Successfully……后，就说明连接成功了

4. 创建Github仓库

  • 在Github主页点击右上角的New repository，然后在Repository name中输入 用户名.github.io 勾选 “Initialize this repository with a README”,Description 选填,填好后点击Create repository就创建好了这个仓库（注意，这里一定是：用户名.github.io 不能是其他的名字，这个用户名是GitHub的用户名）

5. 完善hexo及其配置文件

  • 首先在VScode的终端中输入以下命令来安装部署插件：

    npm install hexo-deployer-git --save

  • 然后修改_config.yml文件：
    • 找到deploy，修改为：
1
2
3
4
deploy:
    type: git
    repository: git@github.com:用户名/用户名.github.io.git
    branch: main

注意这里的 用户名/用户名.github.io.git 两个用户名都要写，不是或者的意思

6. 博客，启动！

  • 然后再VScode的终端中依次执行以下命令：

    hexo cl
    hexo g
    hexo d

  • 由于网络问题，这个过程可能会很慢，等待完成后，打开浏览器，输入 用户名.github.io 就可以看到你的博客了！

四、后语

  • 这样的博客使用默认主题，不太好看，可以去https://hexo.io/themes/找一个自己喜欢的主题，然后自己跟着步骤更改自己的主题

  • 每次需要写新文章时，首先在VScode里面打开Blog文件夹，然后在终端中输入：

    hexo new post 你的文章名

    • 然后点到那个文件夹里面去编辑你的文章，编辑完后保存，如果你喜欢用Typora写文章，那么你可以在Typora中编辑好后复制到这里面，或者直接用Typora打开这个文件夹，然后在Typora中编辑你的文章，编辑完成后保存，然后回到终端，输入：

      hexo cl
      hexo g
      hexo d

    • 稍等一会，你就能再次看到你的博客了，这个时候你的博客已经更新了，别人也能看到你的文章了。（实际上由于网络问题，这个hexo d十次有九次都不，多试几次就行了）

  • 每次进行操作的第一步都是hexo cl清除缓存，这样才能保证不出问题。

  • 我喜欢使用的图床：https://imgloc.com/