三分钟搭建我的博客（Hexo + Next + github）详细教程

时间 2019-11-09

标签三分 3分搭建我的博客 hexo github 详细教程栏目 Git 繁體版

原文原文链接

每一个程序员必不可少的就是博客网站了，一开始咱们并不知道能够搭建属于本身的我的博客网站，一般会在CSDN、博客园等别人搭建的博客网站写博客，当你写久了之后会感受很 low, 一些文章须要审核经过才能发布。索性咱们还不如本身搭建一个我的博客，我的博客的设计美化和内容都按照本身喜欢的要求来，而后在阿里云买一个高大上的域名，岂不是很装逼？尽管你没有学过网页 web 开发，可是经过这篇小鹿详细教程能够亲自搭建起属于本身的我的博客。css

小鹿的博客网址：小鹿的博客html

建站前的准备

建站以前咱们先要作好准备工做，将相关的工具准备好。node

安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

安装网址：https://nodejs.org/zh-cn/
验证是否安装成功：打开 cmd 命令行(win+r 输入 cmd 回车)执行：git

node -v
npm -v

安装成功以后显示版本号：
程序员

安装 Git

一般使用 github 的对 git 并不陌生，Git(读音为/gɪt/。)是一个开源的分布式版本控制系统，能够有效、高速的处理从很小到很是大的项目版本管理。 [1] Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

安装网址：https://www.git-scm.com/download/win
验证是否安装成功：打开cmd命令行(win+r 输入cmd回车)执行：github

git --version

安装成功以后显示版本号：
web

安装 Hexo

Hexo 是一个快速、简洁且高效的博客框架。

了解更多关于 Hexo 请查看官方网站：Hexonpm

安装 hexo 框架

下面一块儿来看看怎么安装 Hexo 框架？
首先选择一个文件夹，这个文件夹主要存放关于你博客的配置文件以及之后要写的的文章，在该文件夹的根目录运行以前下好的 git-bash.exe 。

输入命令开始安装：浏览器

$ npm install -g hexo-cli

这里安装的是 Hexo 最新版本，若是想安装之前的的版本请运行命令 $ npm install -g hexo
以上步骤不出问题的话就已经在本地机器上搭建起了 Hexo 环境。
下面介绍 Hexo 的具体使用方法。bash

初始化Hexo

建立hexo工程

$ hexo init blog

建立一个文件夹blog（blog 为文件夹的名字，可改为本身想要的名字），使用 Hexo 命令初始化 blog 为 hexo 工程目录。

新建POST

$ cd blog
$ hexo new “HelloWorld”

进入初始化后的 blog 文件夹，建立名为HelloWorld的文件，此时会在 /blog/sources/_post/ 目录下生成 HelloWorld.md 文件。

生成静态文件

$ hexo generate

使用 Hexo 引擎将 Markdown 格式的文件解析成可使用浏览器查看的 HTML 文件，HTML 文件存储在 blog/public 目录下。

运行hexo服务器

$ hexo server

打开命令行提示的地址，通常是 http://localhost:4000/，既能够看到咱们的 Hexo 网站。
此时 Helloworld 文章中没有任何内容。打开 /blog/sources/_post/ 目录，使用编辑器打开其中的 HelloWorld.md并在其中添加 markdown 格式的内容保存，而后从新运行如下命令：

$ hexo generate
$ hexo server

命令的含义：hexo generate 生成静态文件， hexo server 启动服务器。默认状况下，访问网址为： http://localhost:4000/。若是从新改变端口号请详细查看官网文档，这里很少介绍。
注意：若是在 HelloWorld.md文件中有中文，在网页进行浏览可能出现乱码，解决方式经过编辑器打开 HelloWorld.md 文件把编码方式改为 utf-8 就能够了。

安装主题

Hexo 提供了默认主题 landscape，主题的位置在 blog ->themes 文件夹下。主题根据本身喜爱能够在网上找到，经过 Git 进行相应的下载。下面小鹿贴出几个主题能够进行相应的下载，喜欢哪个能够进行配置到本身的我的博客了。

主题一：hexo-theme-next（小鹿用的主题是这一个，后期是本身改进美化的）
主题二：Casper
主题三：daleanthony
主题四：hexo-theme-yilia
主题五：jacman
主题六：hexo-theme-apollo

小鹿给你们找了一个主题连接能够选择本身喜欢的主题：更多主题

配置主题

打开 git-bash 切换到 blog -> themes 目录下，若是在目录 blog ->themes 右键选择启动 git-bash 就不用切换了。若是在桌面直接启动 git-bash ,可经过下边命令切换到 blog ->themes 目录下。

$ cd /blog/themes

选好一个主题，复制主题的 github 地址，经过 git 命令进行下载。（例：https://github.com/iissnan/hexo-theme-next 为一个主题的 github 地址）

git clone https://github.com/iissnan/hexo-theme-next

下载完以后我将文件夹改为 next了（也能够不改，我为了名字简洁点）。

而后在修改 /blog/config.yml 文件，将其中的 theme 改为 next。（这个是改变主题的地方，若是你用的是其余的主题，将这个 next 改为你下载下来的主题的文件夹的名称）

从新运行如下命令，查看更换主题后的效果：

$ hexo generate
$ hexo server

申请 Github 免费静态内容空间

注册 Github 帐号

咱们去 Github 的官网进行帐号注册，注册完成以后咱们根据官方文档进行配置，而后咱们使用本身的帐户建立一个 Repository （仓库）。
点击网站右上角的 + 号，选择 New Repository( 注意：建立仓库的名字要你的注册的用户名一致。其余默认，肯定建立)。

以后你的静态内容空间就已经建立好了，在浏览器输入你的 your username（用户名）.github.io 就能够访问了。

将 Hexo 上传 Github 上。

步骤一：安装 deployer-git （安装部署工具，方便之后更新）

$ npm install hexo-deployer-git --save

步骤二：在 /blog/_config.yml 中修改 deploy 属性(注意“：”以后有空格 ) 不然配置失败。

deploy:
  type: git
  repository: https://github.com/luxiangqiang/luxiangqiang.github.io.git
  branch: master

将上方的 Repository 换成你申请的 Git 仓库地址

使用 https 的方式部署每次提交到 Github 都要输入用户名和密码，若是嫌麻烦请使用 SSH 的方式，百度/谷歌自行搜索。
步骤三：初始化本地仓库。

git init

步骤四：链接远程仓库 ( 若是是第一次使用 git，在使用 git 的时候会提示输入用户名和密码，用户名是本身的注册邮箱。)

git remote add origin https://github.com/luxiangqiang/luxiangqiang.github.io.git

步骤五：发布 hexo 到 github page

//等于一次性执行了，清空、刷新、部署三个命令
hexo clean && hexo g && hexo d

步骤六：推送到远程仓库（github）

git push origin

这里建议建立一个新的分支 hexo，用于管理 hexo 文件。提交的的时候只提交 hexo 网站 html、css 等源文件。
建立并切换到新建分支：

git checkout -b hexo

将分支推送到远程仓库：

git push origin hexo

记得提交之后去 github 上把 hexo 分支设置默认，之后写文章等都要部署。文章在 hexo 目录下的 source _posts 文件夹中，是 md 格式，也就是 Markdown 格式。