搭建个人博客

最新推荐文章于 2023-07-17 15:06:32 发布

Shy_tom

最新推荐文章于 2023-07-17 15:06:32 发布

阅读量392

点赞数 1

分类专栏：其他文章标签： TOM 个人博客 personal blog Hexo Github pages

本文链接：https://blog.csdn.net/qq_38877888/article/details/103092150

版权

其他专栏收录该内容

11 篇文章 0 订阅

订阅专栏

title: 搭建个人博客
date: 2019-11-13 16:36:37

对于常年需要学习新东西的人们，经常想把学过的一些东西整理一下。于是写博客就成了很多人整理自己学习过的东西的很好的方式。有人选择在一些成熟的平台上管理自己的博客，比如知乎，CSDN，简书这些平台。不过在别人的平台上写东西很容易受到各种限制，内容也有各种各样的要求。哪有比自己搭一个私人博客网站更炫酷（装*）的呢！！！！

哈哈，let’s go.

一.效果展示

经过特别简单的配置（大概几个小时），一个属于个人的博客网站就搭好了，可以开始更新自己的内容了，毕竟内容才是最重要的啊。

效果如下：

最终效果

二.前期准备

经过总结前人的经验，我把搭建一个个人的博客分为大概三种可行的方案：
第一种方案：搭建一个通过Github pages访问的博客网站。但是这样的话只能通过访问 http://github用户名.github.io的方式访问自己的博客网站，毕竟不够炫酷，但是是免费的。于是有了第二种方案。
第二种方案：把 http://github用户名.github.io绑定到自己的域名，购买一个域名需要一定的费用。
第三种方案：把博客系统放到自己购买服务器上，这样能通过服务器的IP地址访问博客网站，绑定域名后可以通过域名来访问。这是最炫酷的方式，当然也是pay最多的，而且网站还需要经过备案。

由于自己热爱open sourse（其实是没钱），于是我选择了第一种的方案。希望后面有钱了可以实现第三种方案。哈哈。

2.1 选择一个博客框架

为了避免重复造轮子，也为了简单和高效起见，我们需要选择一个已有的博客框架，再在这些框架的基础上搭建。有很多还不错的开源博客框架可以选择。简单列举几个：
- Jekyll
- hugo
- django
- hexo

经过比较，发现hexo框架还不错，有比较好的扩展性和很大的用户基础。于是Tom就选了hexo作为博客的框架。想选择其他框架的请参照具体官网文档,和他们的GitHub issues。

2.2 hexo框架的简介

Hexo 特点

支持Markdown: 支持Markdown意味着你可以把经历从排版中解放出来
轻量: 无需拥有后台及数据库,专心写好你的文章
一键部署: 可以通过Git或者ftp来将生成的静态页面部署到服务器或者主机空间中
插件丰富: 丰富的插件可以满足你的各种需求

其他特性，请参考官方文档.

2.3 配置必要的环境

搭建前期需要四个工具

Hexo:Hexo快速、简洁且高效的博客框架
Node.js:建立在Chrome上的JavaScript运行引擎
Git:一款免费、开源的分布式版本控制系统
GitHub:国内一款面向开发者的云端开发平台，提供代码托管，运行空间，质量控制，项目管理等功能
安装

安装必要的配置环境，如果已经安装过，可以跳过。

2.3.1 安装Git Git官网

找到Download,安装自己对应的系统版本，系统会自动判定你当前版本，推荐下载，如果没有推荐，那就自己选择吧。

安装完后，用win+R打开cmd界面，输入

$git --version

出现git的版本信息说明安装成功。

然后熟悉一下Git管理Github项目的常用命令，理解一下他们的关系,感受一下git版本和分支管理的强大之处。

2.3.2 安装Node.js Node.js下载地址

安装node.js记得选择add to path选项，或者手动配置环境变量。把node所在的bin目录加入环境变量。用win+R打开cmd界面，输入

$node

出现node.js的版本信息说明安装成功。

同理系统依然会判定你的系统并给出稳定推荐的版本和尝鲜版，两种，供君选择。下载安装步骤同样省略。

2.3.3 GitHub账号注册

GitHub账号注册过程很简单，注册流程就省略，完成之后，就开始创建博客了。注册完成后，创建名字为 username.github.io 的仓库,username是你的github用户名。记住一定是这个名字的仓库，不然会出问题的。

2.3.4 安装Hexo

前面的所有工具安装完成后，在git bash或者cmd界面中使用npm安装hexo。

$npm install -g hexo-cli

进阶安装和使用,对于熟悉 npm 的进阶用户，可以仅局部安装 hexo 包。

$npm install hexo

安装 Hexo 完成后，请执行下列命令查看安装hexo的版本信息。

$hexo version

然后运行以下命令，Hexo 将会在指定文件夹中新建所需要的文件。这个指定的文件夹就是保存你的博客站点所有文件的地方。

$hexo init <folder>
$cd <folder>	
$npm install

站点文件包含以下的文件

.
├── _config.yml  //网站的配置文件
├── package.json //应用程序的信息
├── scaffolds    //模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。
├── source       //资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
|   ├── _drafts
|   └── _posts
└── themes       //主题 文件夹。Hexo 会根据主题来生成静态页面。

更多关于站点目录和配置文件的信息。

安装git,hexo，node.js后，熟悉相关命令。不同系统环境下安装遇到的问题请参考官方文档,官方文档支持中英文，很方便。

三.hexo框架搭建博客

3.1 建立hexo项目，本地localhost:port访问

在上一步生成了站点文件夹后，其中会有一个默认主题以及一个hello-word的默认文章。所以我们可以先生成博客来看一下效果，在站点所在目录打开git bash运行命令：

$hexo generate  //可以简写成$hexo g

然后hexo会开始生成博客，生成结束后，文件夹下会多出一个public的文件夹，这个文件夹就是hexo生成的一个完整的静态网站，也就是我们的博客。网站生成好了，我们要浏览它，所以要开启一下hexo自带的服务器，运行命令：

$hexo server  //可以简写成$hexo s

这时候，打开浏览器，输入localhost：4000即可访问博客网站。
如果出现端口冲突，可以使用如下的命令指定其他端口。再使用localhost：port去访问。

$hexo server -p port //可以简写成$hexo g -p port

3.2 远程部署，绑定SSH,域名访问

远程部署指的是，博客在我们本地生成好了以后部署到远程仓库去，如果远程仓库支持pages服务的话，那就可以通过这样的方法发布和更新博客。
要使用远程部署需要先安装hexo-deployer-git，注意，这是适用于git类型仓库的方法，其他仓库的方法在官网中有说明。

运行命令

$npm install hexo-deployer-git --save  //安装hexo-deployer-git package

安装好hexo-deployer-git后，修改博客目录配置文件_config.yml中的deploy字段，用记事本打开就可以：

deploy:
  type: git //pages 部署仓库类型
  repo: 	//git仓库项目地址，你建立的 用户名.github.io仓库
  branch:   //分支，默认是master
  message:  //自定义提交说明，这个字段可以没有，用于描述你的提交

再运行

$hexo deploy

打开github的repo,发现你的仓库里已经有了文件，这是生成的博客网站的静态文件。也就是本地博客文件夹中的public 或者.deploy_git中的内容。hexo生成了你的博客网站的静态文件。在浏览器地址栏输入http://username.github.io就可以访问你的个人博客网站了。很炫酷吧。

参考的一些资料

https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
https://blog.csdn.net/gsl9d1p04f6x2ts3c9/article/details/81024330
https://blog.csdn.net/dazhaoDai/article/details/73730069
https://www.jianshu.com/p/343934573342

绑定SSH

Git使用https协议，每次pull, push都要输入密码，相当的烦。使用git协议，然后使用ssh密钥。这样可以省去每次都输密码。为了方便你的博客的提交，你可以进行git与repo仓库的SSH绑定。

SSH绑定git仓库的特点：

ssh方式单独使用非对称的秘钥进行认证和加密传输，和账号密码分离开来，不需要账号也可以访问repo。
生成和管理秘钥有点繁琐，需要管理员添加成员的public key。不能进行匿名访问，ssh不利于对权限进行细分，用户必须具有通过SSH协议访问你主机的权限，才能进行下一步操作，比较适合内部项目。

如何进行SSH配置。

四.更换主题

4.1 给你的博客选择一个主题

经过以上的配置，你的博客网站已经跑起来了。不过是不是有点丑呢？看来需要进一步的美化我们的网站啊。当然Hexo,也大力支持我们的想法，Hexo提供了很多漂亮的主题供我们选择。Hexo主题。是不是发现有很多主题让你眼花缭乱了，如果不知道应该选哪一个，可以听一听来自前人的建议主题推荐1 主题推荐2。

4.2 更改相关配置

找到自己喜欢的主题，把对应的主题下载到本地站点文件夹下的themes文件夹下。Tom选择了一个名为Butterfly的主题。想要让这个主题应用到我自己的站点上。需要进行如下的操作。

下载主题

找到下载主题的Github repo地址，在站点文件夹下右键打开git bash,输入命令

$git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的dev分支，可以

$git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

应用主题

修改hexo配置文件_config.yml，把主题改为Butterfly

theme: Butterfly

对于不同的主题，可能还有其他的配置才能生效，参加你选择主题的相关文档说明，关于主题Butterfly配置。

如果你没有pug以及stylus的渲染器，请下载安装：

$npm install hexo-renderer-pug hexo-renderer-stylus --save

或者

$yarn add hexo-renderer-pug hexo-renderer-stylus

然后再次generate ,depoly，访问地址，主题就更换好了。

疑难问题解决

五.项目管理

5.1 写博客，删除博客

首先，由于hexo是支持Markdown来编写你的博客的，非常方便。markdown语法也是非常简单的，类似于html,很快就能掌握。在开始写你的博客之前需要先掌握一下。

但是在实际使用时发现了一个问题。在不同的平台对于markdown语法的支持不太一样，但是大多是东西是一样的，对于博客在不同平台间的迁移不太方便。暂时没有太好的解决办法，等有比较好的解决方法时更新一下。hexo支持的markdown 语法和github的markdown语法是一样的。然后最好是选择一个对于hexo markdown语法支持得比较好的makedown编辑器。

其他的markdown语法资料
https://segmentfault.com/markdown
https://www.jianshu.com/p/8c1b2b39deb0

5.2 上传更新博客

先在本地预览一下写好的博客，在站点文件夹下使用git bash运行

$hexo generate //hexo g
$hexo server //hexo s

检查没问题后，提交更新

$hexo deploy //hexo d

六.高级功能

6.1 评论管理

如何给我们的评论添加评论功能呢？

以Tom选择的Butterfly主题为例，打开主题的配置文件夹_config.yml,注意不是站点的配置文件。搜索Comments,发现该主题支持如下的几种评论系统

可以任选一种评论系统进行配置。大致流程为先注册对应的评论系统，再进行一些配置。主题Butterfly相关配置参见主题butterfly相关文档。

其他的配置方法。

6.2 绑定域名

是不是感觉使用githubusername.github.io访问自己的博客还是不够炫酷呢？于是可以给自己的网站绑定一个炫酷的域名，也就是相当于给你的网站起了一个别名，本质上都是通过DNS查找ip地址，然后通过IP地址访问的你的网站的。

可以在CMD界面下通过命令来查看你博客的ip地址。

$ping username.github.io  //ping 你的博客网址

首先注册一个域名，在阿里云上注册或者买一个域名。打开控制台，点击解析域名，把你刚刚查到的ip地址填到刚刚解析的域名的记录值上面。然后在你的博客文件夹下面新建一个名为CNAME的文件，在里面写入你刚刚购买的域名。然后提交你的站点静态文件到仓库里。等待一段时间，然后就可以通过刚刚购买的域名访问你的网站了。