基于Node.js + Hexo + Github Pages搭建
针对Mac系统,Window的安装差别在指令
本人也是一个小白,所以这也是一篇小白也能看懂的文章。我在搭建自己的博客也踩了不少的坑,希望这篇文章能让想搭建博客的小白少踩坑
先来一个喵神的博客的看下效果
1.Github域名
先注册Github账号,正常人都可以注册成功的,这里略过
创建仓库(repository) 来存储我们的网站,点击首页的 New repository
给仓库起名,仓库的前缀是用户名,我已经创建过同名的仓库了,所以显示重名了
2.安装环境软件
2.1 安装Git
Mac系统安装Git很简单,就两行指令
// 如果已安装HomeBrew 无需执行此行
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew install git // 安装Git
Window系统请自行百度,也很简单的,不停点下一步就好
2.2 安装Node.js
要安装Node要先安装nvm,nvm是Node的版本管理工具
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
安装完成后,一定要 重启终端
然后安装Node.js
$ nvm install 4
注意 这里安装可能会出现坑,我就是在这里踩的坑,然后我付出了沉重的代价
安装nvm后,命令窗输出 Warning: nvm-0.31.0 already installed
或nvm install 4 指令出现 command not found
出现这种问题,我是直接下载Node.js来安装,下载地址
2.3 安装Hexo
要前面的git,node都安装了,再安装Hexo
$ sudo npm install hexo-cli -g
3.博客
- 初始化博客文件区
选择一个自己的工作文件下,执行下面的指令,username根据自己的喜欢来命名
$ hexo init username.github.io
配置博客主题
毕竟这是一个看脸的年代,执行下面的指令,进入刚才生成的博客文件区
$ cd username.github.io
安装主题,这里选择的主题是喵神的主题,个人比较喜欢,更多主题请点击
$ git clone https://github.com/monniya/hexo-theme-new-vno.git themes/new-vno
配置主题到博客配置文件,打开当前文件夹下_config.yml修改几个键值对,下面把几个必须设置的列出来按需求修改,记得保存,还有注意配置的键值之间一定要有空格
title: //你博客的名字 author: //你的名字 language: zh-Hans //语言 中文 theme: new-vno //刚刚安装的主题名称
github发布的配置,username换成你的github的用户名
deploy: type: git //使用Git 发布 repo: https://github.com/username/username.github.io.git // 刚创建的Github仓库
针对刚才安装的主题的配置在请点击这里有更多的说明
4.测试
到这里,所有的基础框架已经创建完成,执行下面的指令进行
$ hexo s
终端输出服务器启动完成,终端一直运行,在浏览器中输入http://localhost:4000 访问了
5.写文章并发布
1.写文章
可以博客文章了,先写一个来测试下,在username.github.io/source/_posts文件夹下创建FirstTest.md的文件,md是markdown语法编写的文件。
如下面的例子
---
title: FirstTest
---
第一次写博客文章,用于测试
写完一定要保存
可以先在本地看下效果,把终端正在运行的服务器关闭(ctrl + c), 然后重新启动服务器,执行指令 hexo s
2.安装hexo-deployer-git自动部署发布工具
这个工具会自动把博客文章生成的静态网页上传到github,回到username.github.io/文件下,执行下面的指令安装
$ npm install hexo-deployer-git --save
3.发布文章
生成静态网页文件发布至我们的Github pages中,执行下面的指令
$ hexo clean && hexo g && hexo d
如果这是你的第一次,终端会让你输入Github 的邮箱和密码,正确输入后,就会把你的博客上传至Github。以后在每次把博客写完后,执行一下这个命令 hexo clean && hexo g && hexo d 就可以直接发布了
激动时刻
在浏览器中输入 https://username.github.io 就可以访问你的博客了,username是你自己起的用户名
迷之总结
博客的搭建要有耐心,我都捣腾了很久先弄好的,希望这篇文章可以帮助想搭建博客的同学