基于Hexo和GitHub免费搭建个人博客网站

时间：2023-04-23 09:21:01 | 来源：网站运营

时间：2023-04-23 09:21:01 来源：网站运营

基于Hexo和GitHub免费搭建个人博客网站：

1.引言

阮一峰大神说喜欢写博客的人，会经历三个阶段。

第一阶段，刚接触博客觉得很新鲜，试着选择一个免费空间来写。比如CSDN、博客园。
第二阶段，发现免费空间限制太多，就自己购买域名和空间，搭建独立博客。比如阿里云、腾讯云。
第三阶段，觉得独立博客的管理太麻烦，最好在保留控制权的前提下，让别人来管，自己只负责写文章。比如基于Hexo和GitHub免费搭建个人博客网站。

GitHub提供了Pages功能，只要将写好的Markdown文章提交到Github上托管，即可生成独立博客，而且提供几乎不限流量的存储空间，一切都是免费的。一旦搭建好，则只需要负责写文章就行了，不需要定期维护。

Hexo 是一个基于Node.js的静态博客框架。Hexo使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

• 之前介绍过写Markdown文章的神器Typora，今天就让我们来关注具体搭建个人博客网站的步骤。
• 本文是针对Windows10系统，其他诸如Mac系统还有Linux系统请参考百度相关内容。

2.Hexo的搭建步骤

2.1 安装Git Bash

Git Bash（https://git-scm.com/download/win）（复制到浏览器下载软件）是用来管理你的Hexo博客文章，并将文章上传到GitHub平台的工具。

1）具体的安装过程就是一直点击next，直到出现install，点击install，安装完成后点击finish，然后在任意文件夹下右键打开Git Bsah Here输入命令 git--version，查看有没有安装成功。







注意：右键点击Git Bash Here 如果出现下图，则说明安装路径中有中文（软件安装）。

2.2 安装Node.js

Hexo是基于Node.js（https://nodejs.org/en/）（复制到浏览器下载软件）编写的，所以需要安装该软件。从官网下载，然后安装即可，直接选择LTS（长期支持版）版本的。

1）安装完成后，打开管理员命令行输入命令 node-v以及 npm-v，查看有没有安装成功。

2.3 安装Hexo

1）创建一个文件夹Blog，然后进入该文件夹右键Git Bash Here打开。输入命令 npm install-g hexo-cli，至此就安装完成了。

2）安装完成后，还需要初始化hexo，即执行如下命令：

hexo initnpm install3）新建完成后，在Blog文件夹下会出现许多新的文件，目录如下：

• node_modules：依赖包
• scaffolds：命令生成Markdown文章等的模板
• source：用命令创建的各种Markdown文章
• themes：主题文件夹，Hexo 会根据主题来生成静态页面。
• _config.yml：站点配置文件，您可以在此配置大部分的参数。
• db.json：source解析所得到的
• package.json：项目所需模块项目的配置信息

4）输入如下命令，然后在浏览器中输入 localhost:4000(本地查看)即可查看用hexo生成的博客了。

hexo ghexo s





使用ctrl+c可以把服务关掉。


5）至此，Blog文件夹下会多出两个目录

• .deploy_git
• public

注意：出现bash：npm：command not found错误。







网上试了各种办法，最后重启一下电脑就没有问题了。

3.Hexo关联到GitHub

静态页面已经有了，我们还需要将其部署到GitHub上。一来我们搭建博客想要别人可以（以一个链接）访问到我们的博客，二来我们需要有个托管平台，这样我们就可以关注博客内容本身而不是麻烦的管理。

3.1 GitHub创建个人仓库

1）首先注册一个GitHub账号

2）然后点击New，新建仓库







按照下图所示操作后，点击Create repository即创建成功。

3.2生成SSH添加到GitHub

1）在git bash输入如下命令

git config --global user.name "yourname"git config --global user.email "youremail"这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

2)然后创建SSH,一路回车

ssh-keygen -t rsa -C "youremail"





这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹后可以发现有两个文件（一般位于C盘）。







3)然后在GitHub的setting中，找到SSH keys的设置选项，点击 NewSSH key把 id_rsa.pub里面的信息复制进去。

SSH，简单来讲，就是一个秘钥，其中，idrsa是你这台电脑的私人秘钥，不能给别人看的，idrsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。

3.3 将Hexo部署到GitHub

1）用Notepad++打开站点配置文件 _config.yml。搜索关键词 deploy。将YourgithubName对应的修改为你的GitHub用户名。

deploy: type: git repo: https://github.com/YourgithubName/YourgithubName.github.io.git branch: master2）这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。

npm install hexo-deployer-git --save3）

hexo n bolgname





然后就会发现在Blog/source/_posts目录下出现一个名为blogname的Markdown文章，用Typora软件打开，文件最上方以 --- 分隔的区域，有用于指定个别文件的变量的Front-matter。我用的几个参数具体包括：title，categories，tags，date。








用Typora打开模板文件Blog/scaffolds/post.md文件，可以进行相应的设置。







4) 然后使用两个命令即可将你写好的文章（位于Blog/source/_posts文件夹下）部署到GitHub。

hexo g # 生成静态文章hexo d # 部署文章hexo s # 可以先从本地（localhost:4000）预览效果，在部署文章到GitHub上注意：

1）输入 hexo d命令后需要你输入username和password。

得到下图就说明部署成功了，过一会儿就可以在 http://yourname.github.io 这个网站看到你的博客了。







2）在上面第三步中提到Front-matter，其中除了我使用的几个参数外，还有其他参数。







3）另外，在上面第三步中提到Blog/scaffolds目录，其实该目录下一共有三个文件，刚刚只提到了post.md，还有另外两个文件。







然后这三个文件是对应三种不同的布局（layout）。

1.hexo n [layout] <tittle> # 之前在创建文章时，layout默认是post，名为title的文章在Blog/source/_posts文件夹下2.hexo n draft <tittle> # draft是草稿的意思，名为title的文章在Blog/source/_drafts文件夹下，hexo s --draft # 草稿写好文章后，可以在本地开启预览hexo p draft <tittle> # 将名为title的文章发送到Blog/source/_posts文件夹下3.hexo new page board # 系统会自动在source文件夹下创建一个board文件夹，以及board文件夹中的index.md，这样你访问的board对应的链接就是http://xxx.xxx/board

4.Hexo的基本页面配置

4.1 hexo基本配置

用Notepad++打开站点配置文件 _config.yml，我们可以在 _config.yml中修改大部分的配置。







1）网站


2）网址

• url：网站域名
• permalink：分享某篇文章后在对方的网页中显示的域名。

3）其他设置默认就可以了，更多基本设置可以参考Hexo官网配置（https://hexo.io/zh-cn/docs/configuration）内容。

4.2 更换主题

1）系统默认给的主题是 landscape，并且在hexo官网还提供了270个主题，可以先预览选择一个主题。







比如我个人喜欢next主题，那么怎么应用该主题呢。








2）点击右上角从GitHub上面下载下来，然后再把整个文件夹放到Blog/themes目录下。




3）然后将Blog目录下_config.yml文件中的主题改为next。







4）进入Blog/themes/next目录下，里面也有一个配置文件 _config.yml，这个配置文件是修改你整个主题的配置文件。

• menu（菜单栏）

文件搜索关键词menu。

• search(搜索框)

npm install hexo-generator-searchdb --save # 安装插件修改站点配置文件（位于Blog/_config.yml）中添加内容

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

• avatar（头像）

文件搜索关键词avatar。将准备好的头像放置在Blog/themes/next/source/images目录下。

• social（社交）

文件搜索关键词social。

• 进度条

搜索关键词b2t，将图中两条均改为true。即可得到位于左侧栏的top按钮，可以实时显示阅读进度。

5.Hexo的高端页面配置（比较灵活）

hexo添加各种功能，主要包括

• 搜索的SEO
• 阅读量统计
• 访问量统计
• 评论系统等

可以自由选择添加，具体的设置可以参考这篇文章（http://visugar.com/2017/08/01/20170801HexoPlugins/）。

6.其他

本文是基于Node.js的静态博客框架Hexo，其他的博客各位如果感兴趣可以参考网络资源进行相应的博客搭建。下面列出了其他常见的静态博客。

6.1静态博客

• http://jekyllrb.com（基于ruby）
• http://gohugo.org(基于go)
• http://vuepress.vuejs.org（基于vuejs）
• http://solo.b3log.org(基于java)