Zervan的小站
Zervan
2020-09-01

部署博客-GitHub Pages

这个教程是基于你一无所知的情况下编写的

# 连接Github与本地

首先右键打开git bash，然后输入下面命令：

在本地计算机配置Git全局变量。 输入以下命令：

git config --global user.name "Zervan29131"
git config --global user.email "1162685484@qq.com"

用户名和邮箱根据你注册github的信息自行修改。位置位于C:\Users\zervan\.gitconfig

然后生成密钥SSH key：

$ ssh-keygen -t rsa -C "1162685484@qq.com"

密钥类型可以用-t 选项指定。如果没有指定则默认生成用于SSH-2的RSA密钥。这里使用的是rsa。 同时在密钥中有一个注释字段，用-c来指定所指定的注释，可以方便用户标识这个密钥，指出密钥的用途或其他有用的信息。所以在这里输入自己的邮箱或者其他都行,当然，如果不想要这些可以直接输入：

$ ssh-keygen

输入完毕后按回车，程序会要求输入一个密码，输入完密码后按回车会要求再确认一次密码，如果不想要密码可以在要求输入密码的时候按两次回车，表示密码为空，并且确认密码为空，此时**[c盘>用户>自己的用户名>.ssh]**目录下已经生成好了。

打开github，在头像下面点击settings，再点击SSH and GPG keys，新建一个SSH，名字随便。

这个ssh密钥不是必须要新建的，.ssh文件里面有之前创建好的也可以用，能连到github就行了

添加SSH key到Github，git bash中输入

cat ~/.ssh/id_rsa.pub

将输出的内容复制到Github的SSH框中，点击确定保存。

检测SSH key，输入ssh -T git@github.com，如果如下所示，出现你的用户名，那就成功了。

weiya@weiyang MINGW64 /d/study/progr am/blog (master)
$ ssh -T git@github. com 
warning: Per manently added the RSA host key for IP address ' 52.74.223.119' to th
e list of known hosts 
Hi godweiyang! You ve successful ly autherticated. butdoes not provide sh
e11 access.

# 支持 Git 的部署插件

另外我们还需要额外安装一个支持 Git 的部署插件，名字叫做 hexo-deployer-git，有了它我们才可以顺利将其部署到 GitHub 上面，如果不安装的话，在执行部署命令时会报如下错误：

Deployer not found: git

好，那就让我们安装下这个插件，在项目目录下执行安装命令如下：

npm install hexo-deployer-git --save

安装成功之后，执行部署命令：

hexo deploy

运行结果类似如下：

INFO Deploying: git
INFO Clearing .deploy_ git folder...
INFO Copying files from public folder...
INFO Copying files from extend dirs...
On branch master
nothing to commit, working directory clean
Counting objects: 46，done.
Delta compression using up to 8 threads.
Compressing objects: 100% (36/36)， done.
Writing objects: 100% (46/46)， 507.66 KiBI 0 bytes/s， done.
Total 46 (delta 3)， reused 0 (delta 0)
remote: Resolving deltas: 100% (3/3)， done.
To git@github. com:NightTeam/ nightteam. github.io.git
*  [new branch]		HEAD -> master
Branch master set up to track remote branch master from git@github. com:Night1
INFO Deploy done: git

这时我们的博客已经成功部署到 GitHub Pages 上面了，我们访问一下 GitHub Repository 同名的链接，就可以看到跟我们博客的内容了。

这时候我们去 GitHub 上面看看 Hexo 上传了什么内容，打开之后可以看到 master 分支是博客文件夹下面的 public 文件夹下的所有内容，Hexo 把编译之后的静态页面内容上传到 GitHub 的 master 分支上面去了。

如果你博客的源码也想放到 GitHub 上，我们可以新建一个 source 分支，代表博客源码的意思。

具体的添加过程就很简单了，参加如下命令：

git init
git checkout -b source
git add -A
git commit -m "init blog"
git remote add origin git@github.com:{username}/{username}.github.io.git
git push origin source

成功之后，可以到 GitHub 上再切换下默认分支，比如我就把默认的分支设置为了 source，当然不换也可以。

完成如上内容之后，实际上我们只完成了博客搭建的一小步，因为我们仅仅是把初始化的页面部署成功了，博客里面还没有设置任何有效的信息。

# 配置站点信息

下面就让我们来进行一下博客的基本配置，另外换一个好看的主题，配置一些其他的内容，让博客真正变成属于我们自己的博客。

下面我就需要修改一些基本的配置，比如站点名、站点描述等等。

修改根目录下的 ``_config.yml `文件，找到 Site 区域，这里面可以配置站点标题 title、副标题 subtitle 等内容、关键字 keywords 等内容，如下：

# Site
title: WaterMelon
subtitle: 一个专注技术的组织
description: 涉猎的主要编程语言为 Python、Rust、C++、Go，领域涵盖爬虫、深度学习、服务研发和对象存储等。
keywords: "Python, Rust, C++, Go, 爬虫, 深度学习, 服务研发, 对象存储"
author: zervan

另外还可以设置一下语言，如果要设置为汉语的话可以将 language 的字段设置为 zh-CN，如下：

language: zh-CN

这样就完成了站点基本信息的配置。

# 写文章、发布文章

首先在博客根目录下右键打开git bash，安装一个扩展npm i hexo-deployer-git。

然后输入hexo new post "article title"，新建一篇文章。

然后打开D:\study\program\blog\source\_posts的目录，可以发现下面多了一个文件夹和一个.md文件，一个用来存放你的图片等数据，另一个就是你的文章文件啦。

编写完markdown文件后，根目录下输入hexo g生成静态网页，然后输入hexo s可以本地预览效果，最后 输入hexo d上传到github上。这时打开你的github.io主页就能看到发布的文章啦。

# 绑定域名

现在默认的域名还是xxx.github.io，如果想弄一个专属域名，可以购买一个域名。

打开你的github博客项目，点击settings，拉到下面Custom domain处，填上你自己的域名，保存：

这时候你的项目根目录应该会出现一个名为CNAME的文件了。如果没有的话，打开你本地博客/source目录，我的是D:\study\program\blog\source，新建CNAME文件，注意没有后缀。然后在里面写上你的域名，保存。最后运行hexo g、hexo d上传到github。

#　备份博客源文件

如果我们想换一台电脑继续写博客，就可以将博客目录下的所有源文件都上传到github上面。

首先在github博客仓库下新建一个分支hexo，然后git clone到本地，把.git文件夹拿出来，放在博客根目录下。

然后git branch -b hexo切换到hexo分支，然后git add .，然后git commit -m "xxx"，最后git push origin hexo提交就行了。

当然我新建了一个仓库存放了源文件，具体效果可以看我的博客源文件仓库：

大家也可以先用下文hexo安装方法安装完hexo，然后直接git clone git@github.com:godweiyang/hexo-matery-modified.git克隆我的所有源文件，然后这是我修改完的基本没bug的定制化的博客，就可以直接拿来用啦。

# 网站按照seo 优化，被谷歌和百度收录

# 部署至GitHub Pages

接下来我们来将这个初始化的博客进行一下部署，放到 GitHub Pages 上面验证一下其可用性。成功之后我们可以再进行后续的修改，比如修改主题、修改页面配置等等。

我们可以通过 Hexo 提供给我们的一个命令直接将博客一键部署到 GitHub Pages 上面去，不需要手动去配置服务器或进行其他的各项配置。

部署命令如下：

hexo deploy

在部署之前，我们需要先知道博客的部署地址，它需要对应 GitHub 的一个 Repository 的地址，这个信息需要我们来配置一下。

打开根目录下的_config.yml 文件，这是博客的配置文件，在这里你可以修改与博客相关的各种信息。

找到 # Deployment这个地方，

repository修改为你自己的github项目地址。

repo: {git repo ssh address}

最终修改为如下内容：

# Deployment
## Docs: https:/ /hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/Zervan29131/ZervanBlog.git
  github-token: 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1
  branch: master

指定分支为branch: master

可能需要更改为 branch: main

需要获取taken

github-token: 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

#

# 建立博客

Github Pages提供了免费的服务器承载简单的博客，你只需要在仓库的设置选项中开启Github Pages功能，博客就自动生成了，GitHub提供了很多的模板供选择，同时你也可以自己从头编写。

# 准备条件

  1. 服务器
  2. 数据库
  3. 注册域名

如果这些都没有的话，没事，照样是能搭建一个博客的。

  1. GitHub 提供了 GitHub Pages 帮助我们来架设一个静态网站，解决了服务器的问题。
  2. Hexo的轻量级博客框架是直接使用MarkDown进行创作的，可以直接将文章编译成静态网页文件并发布。这样文章的内容、标题、标签等信息就不必存数据库里了，直接形成静态页面。解决了数据库的问题。
  3. GitHub Pages 允许每个账户创建一个名为 {username}.http://github.io (opens new window) 的仓库。它会自动为这个仓库分配一个 http://github.io (opens new window) 的二级域名，解决了域名的问题。如果想要自定义域名的话，当然也可以支持。

# 新建项目

首先在 GitHub 新建一个仓库（Repository），名称为 {username}.http://github.io (opens new window)，注意这个名比较特殊，必须要是 http://github.io (opens new window) 为后缀结尾的。比如 NightTeam 的 GitHub 用户名就叫 NightTeam，那我就新建一个 http://nightteam.github.io (opens new window)，新建完成之后就可以进行后续操作了。

如果 GitHub 没有配置 SSH 连接的建议配置一下，这样后面在部署博客的时候会很方便。

# 配置环境

# 安装 Node.js

# 安装git工具

# 安装 Hexo

Hexo是一个博客框架，官方还提供了一个命令行工具，用于快速创建项目、页面、编译、部署 Hexo 博客。

在合适的地方新建MyHexoBlogs文件夹用来存放个人博客文件。

在该目录下右键点击Git Bash Here，打开git的控制台窗口，安装命令如下：

npm install -g hexo-cli

安装完成之后，输入hexo -v验证是否安装成功。

# 初始化项目

在MyBlogs文件夹下新建mysite项目，并对其进行初始化。

输入hexo init初始化文件夹，

hexo init mysite

输入cd进入文件夹，

cd mysite

接着输入npm install安装必备的组件。

npm install

此时，会在MyBlogs文件夹下新建mysite文件夹，并在其内部生成相应的项目文件。

这样mysite文件夹下就会出现 Hexo 的初始化文件，包括 themes、scaffolds、source 等文件夹。

接下来我们首先进入新生成的文件夹里面，然后调用 Hexo 的 generate 命令，将 Hexo 编译生成 HTML 代码，命令如下：

hexo generate

可以看到输出结果里面包含了 js、css、font 等内容，并发现他们都处在了项目根目录下的 public 文件夹下面了。

然后我们利用 Hexo 提供的 serve 命令把博客在本地运行起来，命令如下：

hexo serve

运行之后命令行输出如下：

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

此时在本地打开浏览器，通过http://localhost:4000便可访问基于Hexo的个人博客主页了。

这样一个博客的框架就出来了。

# 修改主题

目前来看，整个页面的样式个人感觉并不是那么好看，想换一个风格，这就涉及到主题的配置了。目前 Hexo 里面应用最多的主题基本就是 Next 主题了，个人感觉这个主题还是挺好看的，另外它支持的插件和功能也极为丰富，配置了这个主题，我们的博客可以支持更多的扩展功能，比如阅览进度条、中英文空格排版、图片懒加载等等。

那么首先就让我们来安装下 Next 这个主题吧，目前 Next 主题已经更新到 7.x 版本了，我们可以直接到 Next 主题的 GitHub Repository 上把这个主题下载下来。

主题的 GitHub 地址是：https://github.com/theme-next/hexo-theme-next (opens new window)，我们可以直接把 master 分支 Clone 下来。

首先命令行进入到项目的根目录，执行如下命令即可：

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

执行完毕之后 Next 主题的源码就会出现在项目的 themes/next 文件夹下。

然后我们需要修改下博客所用的主题名称，修改项目根目录下的 _config.yml 文件，找到 theme 字段，修改为 next 即可，修改如下：

theme: next

然后本地重新开启服务，访问刷新下页面，就可以看到 next 主题就切换成功了，预览效果如下：

# 主题配置

现在我们已经成功切换到 next 主题上面了，接下来我们就对主题进行进一步地详细配置吧，比如修改样式、增加其他各项功能的支持，下面逐项道来。

Next 主题内部也提供了一个配置文件，名字同样叫做 _config.yml，只不过位置不一样，它在 themes/next 文件夹下，Next 主题里面所有的功能都可以通过这个配置文件来控制，下文所述的内容都是修改的 themes/next/_config.yml 文件。

# favicon

favicon 就是站点标签栏的小图标，默认是用的 Hexo 的小图标，如果我们有站点 Logo 的图片的话，我们可以自己定制小图标。

图标下载下来之后把它放在 themes/next/source/images 目录下面。

配置完成之后刷新页面，整个页面的标签图标就被更新了。

# avatar

avatar 这个就类似站点的头像，如果设置了这个，会在站点的作者信息旁边额外显示一个头像，比如我这边有一张 avatar.png

将其放置到 themes/next/source/images/avatar.png 路径，然后在主题 _config.yml 文件下编辑 avatar 的配置，修改为正确的路径即可。

这里有 rounded 选项是是否显示圆形，rotated 是是否带有旋转效果，大家可以根据喜好选择是否开启。

配置完成之后就会显示头像。

enable 默认为 true，即默认显示。sidebar 如果设置为 true，按钮会出现在侧栏下方。scrollpercent 就是显示阅读百分比。

# gitalk

由于 Hexo 的博客是静态博客，而且也没有连接数据库的功能，所以它的评论功能是不能自行集成的，但可以集成第三方的服务。

Next 主题里面提供了多种评论插件的集成，有 changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte 这些。可以利用 GitHub 的 Issue 来当评论。

首先需要在 GitHub 上面注册一个 OAuth Application，链接为：https://github.com/settings/applications/new (opens new window)，注册完毕之后拿到 Client ID、Client Secret 就可以了。

首先需要在 _config.yml 文件的 comments 区域配置使用 gitalk：

# Multiple Comment System Support
comments:
  # Available values: tabs| buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: changyan | disqus| disqusjs| facebook_ .comments_ plugin
  active: gitalk

主要是 comments.active 字段选择对应的名称即可。

然后找打 gitalk 配置，添加它的各项配置：

# Gitalk
# Demo: https://gitalk. github.io
# For more information: https://github. com/gita1k/gitalk
gitalk:
  enable: true
  github_ id: NightTeam
  repo: nightteam. github.io # Repository name to store issues
  client_ id: {your client id} # GitHub Application Client ID
  client_ secret: {your client secret} # GitHub Application Client Secret
  admin_ user: germey # GitHub repo owner and collaborators, only these guys C
  distraction_ free_ mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you CE
  # Available values: en| es-ES| fr | ru| zh-CN| zh-TW
  language: zh-CN

配置完成之后 gitalk 就可以使用了，点击进入文章页面，GitHub 授权登录之后，评论的内容会自动出现在 Issue 里面。

供了两个渲染引擎，分别是 mathjax 和 katex，后者相对前者来说渲染速度更快，而且不需要 JavaScript 的额外支持，但后者支持的功能现在还不如前者丰富，具体的对比可以看官方文档：https://theme-next.org/docs/third-party-services/math-equations (opens new window)。

# 文章

我们通过调用 Hexo 提供的命令，新建一篇「HelloWorld」的文章，命令如下：

hexo new hello-world

创建的文章会出现在 source/_posts 文件夹下，是 MarkDown 格式。

在文章开头通过如下格式添加必要信息：

---
title: 标题 # 自动创建，如hello-world
date: 日期 # 自动创建，如2019-09-22 01:47:21
tags:
- 标签1
- 标签2
- 标签3
categories:
- 分类1
- 分类2
---

开头下方撰写正文，MarkDown 格式书写即可。

这样在下次编译的时候就会自动识别标题、时间、类别等等，另外还有其他的一些参数设置，可以参考文档：https://hexo.io/zh-cn/docs/writing.html (opens new window)。

# 标签页

现在我们的博客只有首页、文章页，如果我们想要增加标签页，可以自行添加，这里 Hexo 也给我们提供了这个功能，在根目录执行命令如下：

hexo new page tags

执行这个命令之后会自动帮我们生成一个 source/tags/index.md 文件，内容就只有这样子的：

---
title: tags
date:2021-04-01 17:41:16
---

我们可以自行添加一个 type 字段来指定页面的类型：

type: tags
comments:false

然后再在主题的 _config.yml 文件将这个页面的链接添加到主菜单里面，修改 menu 字段如下：

menu:
  home: /|| home
  #about: /about/ || user
  tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

这样重新本地启动看下页面状态，左侧导航也出现了标签，点击之后右侧会显示标签的列表。

# 分类页

分类功能和标签类似，一个文章可以对应某个分类，如果要增加分类页面可以使用如下命令创建：

hexo new page categories

然后同样地，会生成一个 source/categories/index.md 文件。

我们可以自行添加一个 type 字段来指定页面的类型：

type: categories
comments: false

然后再在主题的 _config.yml 文件将这个页面的链接添加到主菜单里面，修改 menu 字段如下：

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

这样页面就会增加分类的支持。

# 搜索页

很多情况下我们需要搜索全站的内容，所以一个搜索功能的支持也是很有必要的。

如果要添加搜索的支持，需要先安装一个插件，叫做 hexo-generator-searchdb，命令如下：

npm install hexo-generator-searchdb --save

然后在项目的 _config.yml 里面添加搜索设置如下：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

然后在主题的 _config.yml 里面修改如下：

# Local search
# Dependencies: https://github. com/wzpan/hexo- generator-search
local_ search:
  enable: true
  # If auto, trigger search by changing input .
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_ n_ per_ article: 5
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

# 部署脚本

最后我这边还增加了一个简易版的部署脚本，其实就是重新 gererate 下文件，然后重新部署。在根目录下新建一个 deploy.sh 的脚本文件，内容如下：

hexo clean
hexo generate
hexo deploy

这样我们在部署发布的时候只需要执行：

sh deploy.sh

就可以完成博客的更新了，非常简单。

# 自定义域名

将页面修改之后可以用上面的脚本重新部署下博客，其内容便会跟着更新。

另外我们也可以在 GitHub 的 Repository 里面设置域名，找到 Settings，拉到下面，可以看到有个 GitHub Pages 的配置项，下面有个 custom domain 的选项，输入你想自定义的域名地址，然后添加 CNAME 解析就好了。

另外下面还有一个 Enforce HTTPS 的选项，GitHub Pages 会在我们配置自定义域名之后自动帮我们配置 HTTPS 服务。刚配置完自定义域名的时候可能这个选项是不可用的，一段时间后等到其可以勾选了，直接勾选即可，这样整个博客就会变成 HTTPS 的协议的了。

另外有一个值得注意的地方，如果配置了自定义域名，在目前的情况下，每次部署的时候这个自定义域名的设置是会被自动清除的。所以为了避免这个情况，我们需要在项目目录下面新建一个 CNAME 文件，路径为 source/CNAME，内容就是自定义域名。

比如我就在 source 目录下新建了一个 CNAME 文件，内容为：

blog.nightteam.cn

这样避免了每次部署的时候自定义域名被清除的情况了。

编辑 (opens new window)
上次更新: 2023/2/7 00:24:36
投机
Nginx安装配置-Ubuntu2004

← Nginx安装配置-Ubuntu2004→

最近更新
01
修改nginx_conf部分配置
02-22
02
高学历宗教人士
12-04
03
理性思维
12-04
更多文章>
Zervan的小站 · VERSION: 1.0.128 · 基于vilivala构建 | pv と uv | Copyright © 2021-2023 | 鲁ICP备2021036977号-1