基于Github的个人博客快速搭建教程

最新推荐文章于 2024-09-29 19:23:06 发布

fmbao

最新推荐文章于 2024-09-29 19:23:06 发布

阅读量1.2k

点赞数 5

分类专栏：技术分支文章标签：个人博客搭建 github hexo

本文链接：https://blog.csdn.net/u011268787/article/details/83058720

版权

技术分支专栏收录该内容

1 篇文章 0 订阅

订阅专栏

总算下定决心要把博客搭建起来了，之前一直因为想找工作的原因，没有整。现在清闲下来了，再加上最近心态放松了，不太想学习了，所以想着找点东西玩儿。

个人博客的搭建是Hexo与Github配合进行搭建。通过Hexo你可以轻松地通过Markdown编写文章，除了支持Markdown本身的语法之外，还可以通过Hexo提供的标签插件来快速插入特定形式的内容。本文主要分为三个部分，一个是博客搭建准备工作，二是博客界面的修改和装饰，三是使用hexo写博客。

博客搭建准备工作

git下载安装以及绑定github账号

可以参看廖雪峰老师的Git教程，然后从Git官网下载Git 。安装好Git之后需要将github账号与其绑定。在菜单中搜索Git Bash，设置user.name和user.email配置信息：

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后直接三次回车就行，默认不需要设置密码

然后找到生成的.ssh的文件中的id_rsa.pub密钥，将内容全部复制。打开Github_Settings_keys页面，新建new SSH Key。Title是标题，任意填就行，将刚刚复制的id_rsa.pub内容复制进去，最后点击Add SSH Key。在Git Bash中检测Github公钥设置是否成功，输入ssh git@github.com

设置github密钥的原因是，通过非对称加密的公钥与私钥来完成加密，公钥放置在github上，私钥放置在自己的电脑上，github要求每次推送代码都是合法用户，所以每次推送都需要输入账号密码验证推送用户是否是合法用户，为了省去每次输入密码的步骤，采用了ssh，当你推送的时候，git就会匹配你的私钥跟github上面的公钥是否是配对，如果配对就说明你是合法用户。

安装Node.js

hexo是基于Node.js，Node.js的下载地址，选择合适的下载安装即可。

安装hexo

hexo是个人博客网站的框架，这里需要先新建一个文件夹（文件夹命名最好是英文，不然容易出现不可预知的错误）。hexo框架和以后发布的网页都在这个文件夹中，创建好这个文件夹，然后进入，右键使用Git Bash Here进行hexo的安装。在命令行里面输入下面五条语句

npm install -g hexo-cli
hexo init
nmp install
hexo generate
hexo server

第一条语句用来安装hexo（安装完之后，打开刚才新建的文件夹），在文件夹中使用Git Bash Here输入第二条命令，用来自动在文件夹中下载搭建网站需要的文件。第三条语句用来安装依赖包，第四条语句用来生成静态文件。第五条语句用来启动本地服务器。

默认情况下，就可以通过访问http://localhost:4000/，可以看到本地建立的博客，但是要建立一个在线博客还需要将github和本地博客进行连接。

创建github repository远程仓库

创建也比较简单，但是这个地方有一个坑需要注意，稍后来讲。建立一个username.github.io名字类型的仓库（这里需要 $\textcolor{red}{注意username是你github的用户名，必须一致}$ ），仓库建立好之后，需要在仓库的Setting中找到 $\textcolor{red}{}$ $\textcolor{red}{Github Page中的Source，将其修改为master branch}$ 。这些解决方案主要来自于hexo搭建Github博客上传后，网页显示404问题解决方案

部署本地文件到github

远程仓库和本地仓库都创建好了，然后就是建立将本地代码提交远程仓库的路径，用于连接本地仓库和远程仓库。需要的操作是：打开之前建立好的hexo文件夹，然后在里面找到_config.yml文件，现在只需要更改文件最下面的三行代码。在最下面更改原先的代码为：

deploy:
  type: git
  repository: http://github.com/username/username.github.io.git
  branch: master

需要 $\textcolor{red}{注意}$ 的是：

每一个: 之后必须要有空格
注意第二个username之后的后缀
branch之后跟的master的原因是之前咱们更改了Github Page的Source来源

配置好之后执行：

$ hexo generate (或者输入 hexo g)
$ hexo deploy (或者输入 hexo d)

至此，博客搭建算是完成了，而且已经发布到github上了，别人也可以访问到了，在浏览器上访问http:\\username.github.io就可以看到自己的博客。

建议：
在每次部署github之后，可能要过一会才能显示最新的页面，也就是说输入完hexo deploty 之后，建议一开始调试页面的时候在本地服务器上操作，可以节省时间
每次在部署之前最好先clean一下
$ hexo clean
$ hexo generate
$ hexo deploy

博客界面的修改和装饰

在网上有许多很好看的Hexo主题，大家可以到这个知乎问题里面自行挑选。Hexo的主题都是放在github上的。Hexo的主题安装也非常简单，只要将主题文件拷贝到站点目录的themes目录下，然后修改配置文件就行了。

下载主题

在git终端窗口下，定位到Hexo站点目录下（也就是你之前建立的个人博客文件夹下），这里比如下载Next主题

$ cd your-hexo-site
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

如果你对Git不太熟悉，可以在线阅读《Pro Git》进行学习。

启用主题

下载完毕之后，打开站点配置文件 (_config.yml)，找到theme字段，并将其值改为next（或者是你下载下来的主题的文件夹名字）

然后验证主题更换之前，需要使用hexo clean清除hexo的缓存。

主题设定

主题设定，在许多主题的手册上都有教程，大家可以看Next的这个教程更改自己需要的效果，包括设置Scheme，语言，菜单，侧栏，头像，昵称，站点描述以及集成常用的第三方服务。

使用hexo写博客

新建文档以及编辑

在个人博客的文件夹里面打开Git 终端窗口，执行下面的命令

$ hexo new myfirstblog

执行了上述命令在./hexo/source/_posts 路径下新建一个 myfirstblog.md的文件。打开这个文件，你会看到

---
title: myfirstblog.md
date: 2018-10-16 18:11:25
tags:
---

这些直接生成的内容，是用来设置Markdown文档在被解析为静态网页文件时的相关配置，其中tags下面可以添加相关的文章标签。比如我给这篇文章贴上技术的标签

---
title: myfirstblog.md
date: 2018-10-16 18:11:25
tags:
 - 技术
---

除了tags这个参数可以设置，我们还可以对文章进行分类。使用categories 给文章分类（相当于给文章新建一个文件夹进行分类设置），这个和tags不一样。

生成文件的时候需要按照下面的命令将markdown文档生成相应的静态文件。

$ hexo clean
$ hexo generate

遇到的坑

标签，分类，主页这些，在主题配置文件中需要按照这样的格式来写（不过准确来说，应该按照你当时所在版本的格式要求来写）,开始我看的网上的写法都是这样写的tags: /tags没有后面的那个斜线，然而！！！，那就是错的，必须要加斜线。我后来总结了，应该是版本变动的原因，所以按照下载到的版本来写。
```
menu:
  home: /    
  categories: /categories/ 
  about: /about/    
  archives: /archives/ 
  tags: /tags/ 
  #sitemap: /sitemap.xml
  #commonweal: /404/
```