Hexo + GitHub Page 搭建属于自己的博客

来源:互联网 发布:域名 daddy 编辑:程序博客网 时间:2024/06/01 20:24

Hexo + GitHub Page 搭建属于自己的博客

搭建一个个人博客的想法萌生很久了,但一直被搁置,今天终于把个人博客搭好了:
地址:Duan

在此记录一下搭建的过程:

先要安装 Git,安装 Git 的方法就省略了,Git 的安装和使用教程资源推荐:
stormzhang GitHub教程
从0开始学习 GitHub 系列之「Git速成」

博客使用的是 Hexo + GitHub Page 的方式,Hexo 使用的主题是 Next,Hexo next 主题的细节配置可以在这里找到,有中文版的:NexT 使用文档

1 下载安装 Hexo

Hexo 安装和搭建依赖 Nodejs,所有在此之前需要先安装 Nodejs
下载Node.js
参考地址:安装Node.js

在准备好之后,使用 Git Bash 输入如下命令安装 Hexo:

$ npm install -g hexo

2 部署博客到 GitHub

2.1 在电脑中创建项目

在你的电脑上,建立一个目录,作为项目的主目录,就以我自己的为例:
我创建的目录:E:\Blog\Hexo

Windows 进到该目录下然后鼠标右键 Git Bash Here(成功安装 Git 就会有这个),或者在任意位置Git Bash Here,然后依次输入如下命令:

$ cd /e/Blog/Hexo/$ git init

Hexo 随后会在该目录下建立网站所需的文件

2.2 启动 hexo 自带服务器,实时查看修改效果

输入如下命令,启动 Hexo 自带服务器,这时打开浏览器输入 http://localhost:4000/就能看到默认的博客界面了

注意这里如果你想直接在 bash 里复制网址,不用用 Ctrl + C,用右键菜单复制,不然服务器就会停掉。

ai@Duan MINGW64 /e/Blog/Hexo$ hexo serverINFO  Start processingINFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
2.3 创建一篇新博客

bash 中执行如下命令:

$ hexo new "My New Post"

这时在 E:\Blog\Hexo\source\_posts下面应该就自动生成了一个名叫 My-New-Post.md(空格自动被 ‘-’ 替换)的 markDown 文件,这时去浏览器里刷新一下,一篇叫 My New Post的博客就生成了。

打开My-New-Post.md看一下,发现里面已经有如下的内容:

---title: My New Postdate: 2017-05-20 12:54:56tags: ---

这里 title是文章的标题,网站上解析文章标题时就是读取的这个,date时时间,如果你是在 bash 用 hexo new命令生成,那么会自动取当前时间,tags是标签,只有一个标签时直接写在后面即可,有多个标签时要按如下的格式:

tags: - Android- java

这里要特别注意title:date:tags::后面都有一个空格,这个空格千万不能省,不然就解析不了,下面将要说到的 _config.yml文件也是一样的。

接下来执行如下命令:

$ hexo generate

该命令执行完后,会在 E:\Blog\Hexo\public 目录下生成一系列html,css等文件。

2.4 部署到 Github

正式部署(deploy)之前,需要在 GitHub 上创建一个仓库名为 DuanJiaNing.github.io的仓库,把DuanJiaNing替换为你自己的用户名。然后复制 SSH 地址,我的是:git@github.com:DuanJiaNing/DuanJiaNing.github.io.git

打开_config.yml(E:\Blog\Hexo_config.yml)文件,定位到如下位置,并修改(注意:后的空格不能省):

# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:  type: git  repository: git@github.com:DuanJiaNing/DuanJiaNing.github.io.git  branch: master

保存一下,接下来在 bash 中输入如下命令部署到 GitHub 仓库:

$ hexo deploy

浏览器中打开https://duanjianing.github.io/,这时应该能看到你自己的博客界面了。

可以选择 hexo new命令新建一篇博客,或是直接复制其他的 md 文件到 E:\Blog\Hexo\source_posts 文件夹中,复制的话记得要在复制的 md 文件开头加上

---title: ****date: ***tags: **---

每次部署新文章到 GitHub 可以依次执行如下命令:

$ hexo clean$ hexo generate$ hexo deploy

3 使用 next 主题

next 主题的下载和使用在 NexT 使用文档 中说得很清楚,大多数问题都能在那得到解决。

END

原创粉丝点击