hexo+github 搭建个人技术博客

2018-06-29 15:24:12 浏览数 (1)

创建一个github仓库

新建仓库

填写仓库信息

这个仓库的名字需要和你的账号对应， 如 linxunfeng.github.io 输入基本信息,然后点击下方的绿色按钮来创建仓库.

填写信息

安装Hexo

需要先在电脑中安装Node.js和git

  • node：用来生成静态页面的 到Node.js官网下载相应平台的最新版本，一路安装即可。
  • git: 把本地的hexo内容提交到github上去.没有安装的可以看此教程。

接下来安装hexo 终端输入：(一定要加上sudo，否则会因为权限问题报错)

代码语言：javascript复制
sudo npm install -g hexo

cd到你想存放博客的文件夹下，例如我在桌面上的gitHub目录下的一个hexo文件夹

由于这个文件夹将来就作为你存放代码的地方，所以最好不要随便放。

代码语言：javascript复制
cd /Users/username/Desktop/gitHub/hexo

然后在终端中输入 【hexo init】进行初始化，hexo会自动下载一些文件到这个目录

代码语言：javascript复制
hexo init

初始化

初始化后目录结构如图

目录结构

启动Hexo

代码语言：javascript复制
// 是开启本地预览服务
hexo s

启动Hexo

按提示在浏览器下打开

代码语言：javascript复制
http://localhost:4000/

浏览器

配置Hexo

打开_config.yml，滑到最下面，将deploy的内容修改为如图所示内容

_config.yml

代码语言：javascript复制
deploy:
  type: git
  repository: https://github.com/LinXunFeng/linxunfeng.github.io.git
  branch: master

repository对应的值可以在这个地方复制过来，也可以自己动手修改上面的配置

repository

注意了：hexo的配置文件（不仅仅是_config.yml）,只要出现【:】，后面一定要加上个空格，不然会报错

生成静态页面

代码语言：javascript复制
hexo g
// 或者
hexo generate

生成静态页面

若出现如下报错：

代码语言：javascript复制
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'

则执行命令：

代码语言：javascript复制
npm install hexo --save

若无报错，自行忽略此步骤。

此时目录下会多出一个public文件夹，里面存放的就是我们刚刚生成的静态页面

目录结构

上传到github

代码语言：javascript复制
hexo deploy
// 或者
hexo d

如果执行后报错

代码语言：javascript复制
Deployer not found: github 或者 Deployer not found: git

则需要我们再安装一个插件：

代码语言：javascript复制
npm install hexo-deployer-git --save

Deployer not found: git

安装完插件之后再执行一下【hexo d】,它就会开始将public文件夹下的文件全部上传到你的gitHub仓库中

Paste_Image.png

如果你之前未关联过Github，则执行hexo deploy命令时终端会提示你输入Github的用户名和密码，按提示输入即可

浏览器中打开网址[https://linxunfeng.github.io/] 显示的页面与http://localhost:4000 一样，这里的https://linxunfeng.github.io 换成你自己的仓库名称

Paste_Image.png

发布文章

终端cd到你的博客文件夹下，执行如下命令新建文章：

代码语言：javascript复制
hexo new "postName"

名为postName.md的文件会建在目录/blog/source/_posts下。

文章编辑完成后，终端cd到你的博客文件夹下，执行以下两个命令:

代码语言：javascript复制
hexo generate             //生成静态页面
hexo deploy            //将文章部署到Github

安装主题

到Hexo官网主题页去寻找你自己喜欢的主题，这里以NexT.Muse为例 终端cd到你的博客文件夹下执行如下命令：

代码语言：javascript复制
// 将hexo-theme-next这个主题克隆到 ./themes目录下，并修改文件夹名字为next
git clone https://github.com/iissnan/hexo-theme-next themes/next

hexo-theme-next

将_config.yml 里theme的名称landscape修改为next

设置主题

然后再执行如下命令(每次部署文章的步骤)：

代码语言：javascript复制
//清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo clean 
//生成缓存和静态文件
hexo g 
//重新部署到服务器
hexo d

至于更改theme内容，比如名称，描述，头像等去修改./_config.yml文件和./themes/next/_config.yml文件中对应的属性名称即可，不要忘记冒号: 后加空格。详细的介绍请参考NexT 使用文档。

问题小提示

当遇到一些莫名其妙的问题时，可以尝试先执行命令：

代码语言：javascript复制
sudo npm install

出现问题的行为比如：换了一台MBP ; 不小心执行了【hexo init】等。 出现的问题比如：执行 【hexo g】生成静态页面，并【hexo s】 来开启本地预览的时候，页面只出现

代码语言：javascript复制
Cannot GET /

此时你会发现publish文件夹下生成的文件有什么缺少了～

hexo github

0 人点赞