Blog

发布日期: 2020-02-18

更新日期: 2022-06-26

文章字数: 4.3k

阅读时长: 16 分

阅读次数:

在搭建过程中遇到问题欢迎来骚扰我哈！如果觉得有帮助的话不介意打赏一杯奶茶哟~

/**
*
*/

前言

作为一名计算机爱好者，摸索了一周搭建出自己的博客。没有任何前端知识和网站开发经验，总的来说，算不上很难，但也要费些心思。网上各类教程应有尽有，只要肯摸索，还是水到渠成的事。另外，写下这篇文章，记录下自己的经验，给需要的朋友，祝你早日拥有自己的博客！
搭建博客的初衷是希望用博客记录下自己的学习过程，帮助自己复习，分享一部分不成熟的思考，敦促自己把既定的目标完成。
为什么要搭建自己的博客？可以看看这三篇文章：

《为什么你应该（从现在开始就）写博客》 (By 刘未鹏 | Mind Hacks)

《为什么要自建博客？》 (By 知乎)

《我为什么写博客》（By 知明所以）

我们需要知道搭建博客要用到的框架。Hexo是高效的静态站点生成框架，它基于Node.js。我们使用MarkDown在本地编辑我们的博客文章，通过Hexo生成静态页面，再用两条命令即可部署到我们的网站。无需关心网页源代码的具体细节，我们只需要用心写好自己的博客内容就行。

本文目录

快速搭建
安装Node.js
添加国内镜像
安装Git
注册Github账号
创建Git仓库
安装Hexo
配置本地Hexo
连接Github与本地
写文章、发布文章
MarkDown文章编辑器说明
配置个性化域名
更换自己喜欢的Hexo主题
我的博客源代码
结语

快速搭建

有的朋友可能不想去折腾，自定义主题也比较麻烦，亦或有尝试几次搭建却失败，那就可以看这部分。快速搭建可以帮助我们更快搭建出自己的博客，优点是别人博客有的东西你都有，就跟复制差不多；缺点是博客里的配置信息都是别人的，不过不要紧，稍稍改改配置就可以。

在这里以我的博客为例。

一、下载博客源代码

大家可以直接素质二连，Star&Fork我的博客源代码：https://github.com/MUYIio/hexo-themes-matery，这里我给出两种下载方法：

第一种：直接DownLoad，下载到本地就可以。（不推荐）

第二种：如果你已经安装了Git，就可以右键单击Come Bash Here运行

1	git clone git@github.com:MUYIio/hexo-themes-matery.git

将所有文件下载到本地，这个复杂一点。

二、修改博客文档配置

首先将我们下载的博客源代码解压，然后修改主要配置：

根目录配置文件_config.yml和主题目录配置文件_config.yml中修改个人信息。
根目录配置文件中修改deploy一栏的repository。
根目录配置文件中修改baidu_url_submit一栏的token。
主题配置文件中修改gitalk一栏，修改方法见正文。

我给出的是博客比较明显的几个地方，先修改这几个地方，其它的可以自己慢慢摸索修改。

最后一步，本地的运行环境还是需要搭建好的，跟着下文操作到连接Github与本地，环境就算是搭建完成。

本地环境搭建好之后会生成的文件：

然后直接把Hexo文件夹里面的文件删掉，把我的源代码的文件全部移动过来，就是这样了：

然后在Hexo文件夹下右键单击鼠标，点击 Git Bash Here点击输入以下命令上传就可以了：

hexo clean
hexo g
hexo d

安装Node.js

了解一下什么是Node.js：

Node.js就是一个用于创建服务器端应用程序的运行系统，它可以轻松构建网络或其他事件驱动的应用程序服务器。

需要用到的命令：

$ git --version
$ node -v
$ npm -v

点击此处进入Node.js官网下载相应版本即可，安装时选项全部默认，一路点击Next。

检验是否安装成功：
按Win+R打开命令提示符，输入node -v和npm -v，如果出现版本号，那么就安装成功了。

添加国内镜像

这里我们使用阿里的国内镜像进行加速，按Win+R打开命令提示符输入：

npm config set registry https://registry.npm.taobao.org

安装Git

Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理，帮助我们把本地网页上传到Github。

点击此处进入Git官网下载相应版本，默认安装即可。

参考资料：《如何在windows下安装GIT》 (By 俊雨廷休)

检验是否安装成功：

安装完成后在命令提示符中输入git –version验证是否安装成功

git --version

注册Github账号

Github作为全球最大的开源社区，相信朋友们都已经有了吧，如果没有，点击此处进入Github官网点击 Sign Up 注册账户。

创建git仓库

登录Github创建一个仓库

如下图所示，输入自己的项目名字，后面一定要加.github.io后缀，README初始化也要勾上。名称一定要和你的Github名字完全一样，比如你github名字叫A，那么仓库名字一定要是A.github.io。

选择一个自己喜欢的主题：
在上面创建的仓库里面点击Settings（不是头像下面那个Settings），向下拉到最后有个GitHub Pages，点击Choose a theme选择一个主题。然后等一会儿，再回到GitHub Pages，就可以预览效果啦。

安装Hexo

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Heroku上，是搭建博客的首选框架。

选择一个磁盘，新建一个文件夹用来存放博客文件。比如我的（C/panakot Blog），在该文件夹下右键单击鼠标，点击 Git Bash Here，输入以下 npm 命令即可安装

$ npm install hexo-cli -g

输入hexo -v即可检验是否安装成功，我这里就不演示了。

配置本地hexo

还是在刚才新建的文件夹下再新建一个Hexo文件夹，比如我的（C/panakot Blog/Hexo），在Hexo文件夹下右键单击鼠标，点击 Git Bash Here，依次输入以下 npm 命令即可初始化。

hexo init
npm install

初始化成功生成的文件：

接着我们输入hexo g生成静态网页，然后输入hexo s打开本地服务器，然后浏览器打开http://localhost:4000/，就可以预览我们的博客啦，如图：

显示以下信息说明操作正确：

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

按ctrl+c关闭本地服务器。

我们以后常用到的Hexo命令：

hexo s等价于 hexo server #Hexo 会监视文件变动并自动更新，除修改站点配置文件外,无须重启服务器,直接刷新网页即可生效。
hexo g 等价于 hexo generate #生成静态网页 (执行 $ hexo g后会在站点根目录下生成public文件夹, hexo会将”/blog/source/“ 下面的.md后缀的文件编译为.html后缀的文件,存放在”/blog/public/ “ 路径下)
hexo d 等价于 hexo deploy #将本地数据部署到远端服务器(如github)
hexo clean #清除缓存 ,网页正常情况下可以忽略此条命令,执行该指令后,会删掉站点根目录下的public文件夹

连接Github与本地

一、生成密钥

右键单击鼠标，点击 Git Bash Here输入以下命令：

git config --global user.name "Name"
git config --global user.email "Email"

Name和Email是我们注册Github时的用户名和邮箱。

然后生成密钥：

ssh-keygen -t rsa -C "Email"

Email是我们注册Github时的邮箱

然后会出现：

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):
//到这里可以直接回车将密钥按默认文件进行存储

回车之后：

Enter passphrase (empty for no passphrase):
//这里是要你输入密码，其实不需要输什么密码，直接回车就行
Enter same passphrase again:

接下来会有：

Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
这里是各种字母数字组成的字符串，结尾是你的邮箱
The key's randomart image is:
这里也是各种字母数字符号组成的字符串

现在密钥已经生成，一般存放在（/c/Users/you/.ssh/id_rsa.pub.），我们运行下面的命令将密钥复制为粘贴板：

 clip < ~/.ssh/id_rsa.pub

二、连接Github

在Github头像下面点击Settings，再点击SSH and GPG keys，新建一个SSH，名字任意。

然后将刚才复制的密钥添加就可以了，像这样：

本地连接Github

右键单击鼠标，点击 Git Bash Here输入以下命令，如果如下图所示，出现你的用户名，那就成功了

ssh -T git@github.com
//注意不要做任何修改

用记事本打开博客根目录下的_config.yml文件，这是博客的配置文件，我们需要修改一下才能连接Github。

修改最后一行的配置：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

改为：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:panakot/panakot.github.io.git
  branch: master

切记：

repository修改为你自己的github项目地址。
每一个冒号后面都有一个空格。

写文章、发布文章

首先在博客根目录下右键打开Git Bash Here输入以下命令，安装一个扩展.

npm i hexo-deployer-git

然后输入下面的命令，新建一篇文章。

hexo new post "article title"

然后打开C:\panakot Blog\Hexo\source_posts的目录，可以发现下面多了一个文件夹和一个.md文件，一个用来存放你的图片等数据，另一个就是你的文章文件啦。

编写完markdown文件后，根目录下右键打开Git Bash Here输入hexo g生成静态网页，然后输入hexo s可以本地预览效果，最后输入hexo d上传到github上。

你的博客地址：https://你的用户名.github.io，比如我的是：https://muyiio.github.io，现在每个人都可以通过此链接访问你的博客

MarkDown文章编辑器说明

前面我们提到了使用MarkDown编辑我们的博客文章。 Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法，非常的简单实用，常用的标记符号屈指可数，几分钟即可学会， .md 文件可以使用支持 Markdown 语法的编辑器编辑，然后将写好的文章（.md文件）保存到 \Hexo\source_posts 文件夹下即可。

Windows 上推荐使用 MarkdownPad2 或者小书匠编辑器，macOS 上使用 Mou 编辑器，Linux 上使用 Remarkable 编辑器，Web 端上使用简书。

点击此处下载MarkDown
，刚使用的朋友或许不知道如何使用这个编辑器，只需要几分钟就可以掌握啦，给出以下几个我觉得不错的参考：

《献给写作者的 Markdown 新手指南》（By 简书）

《Markdown语法图文全面详解(10分钟学会)》（By 黑暗星球）

《Markdown 语法手册（完整整理版）》（By witnessai1）

《认识与入门 Markdown》（By Te_Lee）

写完文章记得在博客根目录Bash Here输入hexo g和hexo d上传到网站。