如何三句命令建好属于自己的博客

_白墙
631 阅读10分钟

该文章仅用于记录学习以及分享自己的实践过程

前言： 想弄个博客网站，就会联想到不得有台服务器吗？不得搞数据库吗？不得注册域名吗？没事，如果都没有，那照样是能搭建一个博客的。这里就要记录如何使用GitHub来建属于自己的博客。

安装环境

Node

下载地址：nodejs.org/zh-cn/downl… 可以安装 Stable 版本。安装完毕之后，确保环境变量配置好，能正常使用 npm 命令

Hexo

Hexo是一个博客框架，Hexo 官方还提供了一个命令行工具，用于快速创建项目、页面、编译、部署 Hexo 博客，所以在这之前我们需要先安装 Hexo 的命令行工具。

安装命令npm install -g hexo-cli

安装完毕后可以输入hexo -v查看是否有版本号，确保环境变量配置好，能正常使用 hexo 命令

创建项目

  1. 我们使用 Hexo 的命令行创建一个项目，首先使用新建一个文件夹，改为你需要的名字（建议纯英文），打开命令行输入下面命令：
hexo init {name} //name是你的项目名

image.png

看到终端输出这样就完成了，文件夹下就会出现 Hexo 的初始化文件，包括 themes、scaffolds、source 等文件夹，这些内容暂且先不用管是做什么的，我们先知道有什么，然后一步步走下去看看都发生了什么变化

  1. 进入新生成的文件夹里面，然后调用 Hexo 的 generate 命令，将 Hexo 编译生成 HTML 代码，运行hexo generate命令后，可以看到输出结果里面包含了 js、css、font 等内容，并发现他们都处在了项目根目录下的 public 文件夹下面了
  2. 我们利用 Hexo 提供的 server 命令把博客在本地运行起来hexo server，运行之后命令行输出如下
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

点开本地 4000 端口上就可以查看博客站点了，如图所示：

image.png

到这里就已经把静态博客的架子已经搭建出来了

开始部署

接下来我们把这个博客架子放到GitHub Pages上面看是否能成功，成功之后我们可以再进行博客样式

  1. 在部署之前我们需要先知道博客的部署地址，它需要对应 GitHub 的一个项目地址，首先在 GitHub 新建一个仓库，名称为 {username}.github.io，注意这个名比较特殊，必须要是 github.io 为后缀结尾的

建成后打开项目文件根目录下的 _config.yml 文件，找到 Deployment 这个地方，把刚才新建的 Repository 的地址贴过来，然后指定分支为 master 分支，最终修改为如下内容：

# Deployment## Docs: https://hexo.io/docs/deployment.html
deploy:  
    type: git  
    repo: {git repo ssh address}  
    branch: master

修改完后还需要额外安装一个支持 Git 的部署插件，名字叫做 hexo-deployer-git，有了它我们才可以顺利将其部署到 GitHub 上面，安装命令npm install hexo-deployer-git --save，安装完后就可以继续我们的部署

  • 部署命令还是使用我们的hexo命令输出
hexo deploy

运行到这步踩坑，没有在GitHub配置了ssh的话会让你输入，不然会一直运行失败，在GitHub配置好ssh就可以上传成功了。不会ssh配置可以点击教程 成功后可以看到GitHub上传了什么

image.png

完成上面就可以实现自己的博客了，但是还没有配置好自己喜欢的主题和标题，hexo是支持修改站名和描述等等。 修改根目录下的 _config.yml 文件，找到 Site 区域，这里面可以配置站点标题 title、副标题 subtitle 等内容、关键字 keywords 等内容，比如我的就修改为如下内容：

# Site
title: 白墙博客
subtitle: '一面白墙正在绘画'
description: '主要编程为JavaScript、TypeScript、vue3.x'
keywords: 'JavaScript,TypeScript，vue3.x，Es系列，Css系列'
author: 白墙
language: zh-CN
timezone: ''

三句命令下来，这样就完成了站点基本信息的配置，完成之后可以看到一些基本信息就修改过来了，页面效果如下：

image.png

更换主题

GitHub上有很多主题都可以拉取下拉使用更改，目前 Hexo 里面应用最多的主题基本就是 Next 主题了，它支持的插件和功能也极为丰富，配置了这个主题，我们的博客可以支持更多的扩展功能，比如阅览进度条、中英文空格排版、图片懒加载等等。 主题的 GitHub 地址是：github.com/theme-next/… master 分支 Clone 下来。 进入项目的根目录打开终端，运行下面命令

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

github.com/theme-next/hexo-theme-next themes/next

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

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

image.png

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

image.png

主题样式

next提供很多样式，风格不变，但整个布局位置不太一样，通过修改scheme字段即可，注意是next文件下的_config.yml

image.png

刷新页面之后就会变成这种布局 image.png

头像

avatar 这个就类似站点的头像，如果设置了这个，会在站点的作者信息旁边额外显示一个头像。红色箭头指向

image.png

把需要的图片放置themes/next/source/images/avatar.png 路径，然后在_config.yml文件下更改avatar配置，url位置上更改正确的路径

image.png

还有另外两个配置，rounded是配置是否为圆形，rotated鼠标移动过去是否可旋转

RSS

RSS订阅是站点用来和其他站点之间共享内容的一种简易方式(也叫聚合内容)，即Really Simple Syndication(简易信息聚合)。通常被用于新闻和其他按顺序排列的网站。 博客一般是需要 RSS 订阅的，如果要开启 RSS 订阅，这里需要安装一个插件，叫做 hexo-generator-feed，安装完成之后，站点会自动生成 RSS Feed 文件，安装命令npm install hexo-generator-feed --save，安装完成之后不需要其他的配置，以后每次编译生成站点的时候就会自动生成 RSS Feed 文件了

代码块

博客写技术文必定出现的代码块，next也可以配置修改，修改 _config.yml 文件的 codeblock 区块如下

image.png

设置完如下： image.png

阅读进度

reading_process，阅读进度。大家可能注意到有些站点的最上侧会出现一个细细的进度条，代表页面加载进度和阅读进度，修改 _config.yml 如下：

image.png

设置完如下： image.png

书签

bookmark，书签，可以根据阅读历史记录，在下次打开页面的时候快速帮助我们定位到上次的位置，大家可以根据喜好开启和关闭

image.png

github_banner

在一些技术博客上，大家可能注意到在页面的右上角有个 GitHub 图标，点击之后可以跳转到其源码页面，可以为 GitHub Repository 引流，permalink设为自己的GitHub链接，title是鼠标滑动过去显示的标题

image.png

评论

由于 Hexo 的博客是静态博客，而且也没有连接数据库的功能，所以它的评论功能是不能自行集成的，但可以集成第三方的服务。Next 主题里面提供了多种评论插件的集成，有 changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte 这些。这里使用gitalk。它是利用 GitHub 的 Issue 来当评论，样式也比较不错。 首先需要在 GitHub 上面注册一个 OAuth Application，链接为：github.com/settings/ap… 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 | gitalk | livere | valine | vkontakte  
    active: gitalk

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

# Gitalk
# For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk
gitalk:
  enable: true
  github_id: white-wall
  repo: white-wall.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: white-wall # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  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 can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN

添加上面配置后刷新后就会出现这样的样式

image.png

无刷新加载

可能大家听说过 Ajax，没听说过 pjax，这个技术实际上就是利用 Ajax 技术实现了局部页面刷新，既可以实现 URL 的更换，又可以做到无刷新加载。

要开启这个功能需要先将 pjax 功能开启，然后安装对应的 pjax 依赖库，首先修改 _config.yml 修改pjax: true

切换到 next 主题文件下，然后安装依赖库：

$ cd themes/next
$ git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

更多主题修改等配置可在hexo.io/docs/ 官网查看

文章

一开始生成后细心的hexo已经给出这行命令了

image.png hexo new hello-hexo运行这行命令就会出现在 source/_posts 文件夹下，是 MarkDown 格式。 在文章开头通过如下格式添加必要信息：

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

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

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

标签页

跟新建文章一样，在目录下输入hexo new page tags执行这个命令之后会自动帮我们生成一个 source/tags/index.md 文件，也是MarkDown格式的。我们可以在tags文件内我们可以自行添加一个 type 字段来指定页面的类型，如图所示：

image.png

在刚刚新建的文章文件中设置，如图所示：

image.png

设置完在主题的 _config.yml 文件将这个页面的链接添加到主菜单里面，修改 menu 把tags#去掉就可以达到打开标签页的效果，然后就可以到页面查看效果

image.png

搜索页

添加搜索功能，需要先安装一个插件，叫做 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

image.png

404页面

页面都需要有个404状态页面，博客也不例外，直接在根目录 source 文件夹新建一个 404.md 文件即可，内容可以仿照如下：

---
title: 404 Not Found
date: 2021-09-20 10:41:27
---
<center>
对不起，您所访问的页面不存在或者已删除。
您可以<a href="https://blog.white-wall.cn>">点击此处</a>返回首页。
</center>

<blockquote class="blockquote-center">
    whiteWall
</blockquote>

新建完也要在主题_config.yml中打开404的#

image.png

部署脚本

其实方便后面一行代码就可以直接完成博客更新来配置，在根目录下新建一个 deploy.sh 的脚本文件，内容如下：

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

sh deploy.sh

自定义域名

GitHub还支持自定义域名的设置,在github项目 setting滑到看到page，设置完就可以看到这样提示

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

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

blog.white-wall.cn
avatar
文章
阅读
粉丝