美文网首页
零基础搭建Hexo炫酷静态页面博客

零基础搭建Hexo炫酷静态页面博客

作者: 番茄和鸡蛋 | 来源:发表于2017-09-30 12:00 被阅读0次

GitHubPages + hexo 简介

最近花了两天的时间搭建了一个博客,使用GitHubPages + hexo

为什么选用GitHubPages + hexo 优点如下:

1.超快速度
Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。

2.支持 Markdown
Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。

3.一键部署
只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。

4.丰富的插件
Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。

博客地址

blok.png

前期准备

github账号
node.js
npm
hexo
注意:(node.js 集成带有npm,因此只要下载 node.js 就可以了)

github上创建GitHubPages仓库
GitHubPages
官方参考地址

注意

创建仓库的时候仓库名一定严格按照 git用户名.github.io 来命名
创建仓库完成之后,在本地创建一个站点文件夹 git用户名.github.io/blog

下载node.js

我是在mac系统上搭建的,下载用的终端brew命令,如果其他系统或者没有翻墙,可能会有问题,如果下载失败可以移步Node.js官网,下载最新版本一路安装即可。
检测安装是否成功 终端输入 node -v ,npm -v 成功则显示版本号

➜  blog git:(master) ✗ npm -v
5.3.0
➜  blog git:(master) ✗ 

下载 hexo

hexo官方
有详细的windows和mac用户的安装文档,如果因为防火墙等原因安装失败,请使用下面命令安装,sudo赋予命令最高权限,避免权限不足

➜  blog git:(master)  sudo npm install hexo --no-optional

下载git

文档说明,上面有各个平台的git下载安装步骤,按照步骤安装即可

本地关联github仓库

git下载安装完成之后,需要跟你的github仓库关联起来,你需要一个私钥和公钥,首先查看本地有没有

➜  ~ git:(master) ✗ cd ~/.ssh 
➜  .ssh git:(master) ✗ ls
config      id_rsa      id_rsa.pub  known_hosts
➜  .ssh git:(master) ✗ 

如果没有id_rsa(私钥)和id_rsa.pub(公钥)就需要手动生成一个,执行命令

➜  ~ git:(master) ✗ ssh-keygen 

生成双钥,然后把公钥放到github仓库上,点击头像选择settings

githubkey1.png

左侧找到SSH,然后点击New SSH key,把公钥的文本内容粘贴进去,就可以了

githubkey2.png

部署hexo

命令介绍

准备工作完成,就可以部署看一下博客界面效果了,先介绍一下hexo常用命令

  • hexo clean 清除编辑后生成的静态文件,一般部署前都会执行一遍,防止上次部署结果影响新的文件内容
  • hexo generate 编辑生成静态页面等
  • hexo server 启动服务
  • hexo develop 部署到远程github,需要修改配置文件,稍后介绍

基本上用到的就是这些命令,为了方便可以设置快捷指令,执行如下命令,会在跟目录生成一个.bash_profile文件,同时打开.bash_profile进入编辑模式

➜  ~ git:(master) ✗ cd ~
➜  ~ git:(master) ✗ vi .bash_profile 

然后输入以下内容,进行保存,linux命令

alias hexo clean=hexo c
alias hexo generate=hexo g
alias hexo server=hexo s
alias hexo develop=hexo d
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
~                                                                               
-- INSERT --

执行如下命令,让文件生效

➜  ~ git:(master) ✗ source .bash_profile

至此,快捷指令设置完成

本地部署

然后cd进入本地博客根目录,执行命令

➜  ~ git:(master) ✗ hexo c
➜  ~ git:(master) ✗ hexo d
➜  ~ git:(master) ✗ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

看到如下信息就可以在本地访问http://localhost:4000/ 查看博客主页了

远程部署

部署到元辰github上需要修改一下本地博客配置文件,找到根目录的_config.yml文件,修改以下内容

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:你的github名/你的github名.github.io.git
  branch: master

然后就可以执行如下命令部署到github

➜  ~ git:(master) ✗ hexo d

看到如下信息说明部署完成,就可以通过https://你的github名.github.io/ 访问你的主页了

INFO  Deploy done: git

部署完成

至此,一个博客模板搭建完成,hexo还支持丰富的插件,包括RSS订阅,评论系统的接入,文章阅读量,打赏功能,第三方链接,如微博,发邮件等。

接入以上功能,让自己的博客更加炫酷!可以联系博主,博客主页有邮箱,微博,文章底部有微信公众号等联系方式。

谢谢!

相关文章

网友评论

      本文标题:零基础搭建Hexo炫酷静态页面博客

      本文链接:https://www.haomeiwen.com/subject/jemgextx.html