0%

Hexo博客搭建简记

背景

博客是我记录学习过程最好的方式;我的第一个博客是百度空间,后来百度关闭了;第二个博客是ChinaUnix,最近ChinaUnix升级了安全,牛盾老是阻止我访问,再者ChinaUnix风格太老了,写出来的东西也不漂亮,于是就想自己搭建一个博客,现在的blog有很多,比如wordpress,ghost,等等,[比较之下][0]觉得hexo有逼格,高大上,就你了!

环境搭建

基础环境

  • Node.js
  • Git
  • Github
  • MarkDown 编辑器

软件获取

[下载nodejs][1]
[下载git][2]

安装过程

安装git

start–>next–>end(详细过程略)

安装nodejs

start–>next–>end(详细过程略)

安装hexo

  • 开始安装Hexo
    npm install -g hexo
  • 初始化博客
    hexo init #默认路径为当前目录,可以在init后手动指定一个目录为博客根目录
  • 生成静态页面
    hexo g #完整命令hexo generate
  • 启动本地服务
    hexo s #完整命令hexo server,默认启动范围地址 http://localhost:4000 可以使用-p指定端口
    至此hexo 博客安装完毕

github

注册并登陆github
创建一个与自己用户名对应的项目(如:nsxq.github.io)

配置hexo

hexo的主配置文件就是blog主目录下的_config.yml文件
打开文件,在配置文件最末尾,修改配置为:

  type: git
  repo: git@github.com:nsxq/nsxq.github.io.git
  branch: master```

- 安装插件,支持hexo提交到github  
`npm install hexo-deployer-git --save`  

- 提交blog数据到github  
`hexo d**  #完整命令 hexo deploy`

## 更换皮肤next  
目前我看到的最漂亮的皮肤就是next  
`git clone https://github.com/iissnan/hexo-theme-next`  
复制hexo-theme-next目录到hexo\themes\为next
修改_config.yml中配置项theme: next  
next主题默认的Next.Muse,可以在主题配置文件hexo\themes\next\_config.yml中修改Schemes
[更换字体][8]
## 图片居左
修改E:\Hexo\themes\next\source\css\_custom\custom.styl
.post-body .fancybox img {
    margin-left: 0 !important;
}
## 博客更新后,打开一片空白
解决方法:替换掉 next 主题中提供的默认 DNS 加速服务。
步骤如下:
打开 /…/themes/next/_config.yml 主题配置文件,搜索jquery.min.js,将整段替换为
# FancyBox
# jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
# fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
# fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
jquery: https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js
fancybox: https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.1/jquery.fancybox.min.js
fancybox_css: https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.1/jquery.fancybox.min.css
hexo clean
hexo g
hexo d

# 将blog发布到公网  
- 我的在阿里云(原万网)上买的域名,设置一条CNAME即可  
CNAME    @    默认	nsxq.github.io	
- 在hexo\source 目录下新建一个文件CNAME,内容为  
islocal.cc
- 修改_config.yml中url为  
url: http://islocal.cc  
- hexo g
- hexo d
浏览器就可以使用http://islocal.cc 访问blog了

# 文章链接唯一化
修改站点配置文件E:\Hexo\_config.yml
permalink: arlo/:abbrlink/
abbrlink:
  alg: crc32  # 算法:crc16(default) and crc32
  rep: hex    # 进制:dec(default) and hex

# 编写第一篇博文
- 是不是终于搭建完成了,懵逼了,完全不知道干吗了?
- 是不是搭建完发现blog上不能直接编写很惊讶?
- 是不是终于google到可以使用markdown语法编写,从来没用过?
- 这都不是事儿!
**教程奉上**
[markdown快速入门][4]
[Hexo博客的写作][3]
**工具奉上**
[马克飞象][5]
[在线markdown编辑器][6]
[让Baidu和Google收录Hexo博客][9]

# 参考文档
[Hexo官方中文文档][7]

[0]:http://kaimingwan.com/post/gong-ju/farbox-jekyll-octopress-ghost-hexodeng-zhu-liu-bo-ke-sheng-cheng-qi-te-dian-gai-xuan-ze-na-ge
[1]:https://nodejs.org/en/download/  
[2]:https://git-scm.com/download/
[3]:http://wowubuntu.com/markdown/basic.html
[4]:http://www.hais2.com/2016/03/07/Hexo%20Getting%20Started%206/
[5]:https://maxiang.io/
[6]:http://mahua.jser.me/
[7]:https://hexo.io/zh-cn/docs/
[8]:http://prozhuchen.com/2015/10/05/Hexo%E5%8D%9A%E5%AE%A2%E4%B9%8B%E6%94%B9%E5%AD%97%E4%BD%93/
[9]:http://www.franktly.com/2016/07/06/%E8%AE%A9Baidu%E5%92%8CGoogle%E6%94%B6%E5%BD%95Hexo%E5%8D%9A%E5%AE%A2/