Hexo从头搭建自己的博客
已然从jekyll的坑跳了出来, 转向了hexo来构建自己的博客, 尤其是在windows下, 再也不需要繁琐的设置源, 每次要用额外的命令来构建server, 赞hexo.
Hexo是一个node.js的库, 是一个快速、简洁且高效的博客框架, hexo的社区有很多好玩的主题, 插件, 里面也有很多中国的开发者, 当然是以前端开发为主. 这篇博客会介绍用hexo搭建自己的数据博客的过程
以下是基本流程, 如果本篇有内容不清楚的过程, 可以根据这个流程查看官方文档
完成这些工作后, 预期可以得到一个自己的网站, 也就是从头到尾搭建自己的网站, (需要买一个顶级域名来实现微信不屏蔽你的博客) 预计工作量如下:
windows + 完全不懂编程: 8h
熟悉git+github: 4h
熟悉git+github+node: 1h
熟悉git+github+以前有jekyll博客: 48h(迁移的故事太心酸)
相较于微信公众号和知乎,显然搞这个更有成就感嘛..
- 前期准备
- 安装node.js
- 安装git
- 安装hexo
- 注册github
- 新建一个名为[username].github.io的repo
- 博客构建
- hexo init
- 主题选择与设置
- 开始写博客吧
- 部署
- 其他问题
- 插件与域名
前期准备
node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. 如果你对前端的东西不是很熟, 可以忽略前一句, 直接把这个软件装好.
下载网址在:
Windows 用户可以直接安装, 如果你是Linux/Mac的用户, 还需要额外设置一下node的环境变量
以保证在命令行(cmd)中运行 node --version
可以看到版本号,比如我的就是v6.9.2:
1 | node --version |
node 会给你的电脑中安装两个命令,一个是node, JavaScript运行环境, 另外一个是npm (node package manager), 前者基本不会被用到, 后者等下会有一些使用,安装一些需要的包.
git
Git是一款免费、开源的分布式版本控制系统, 作用是处理各式各样版本管理, 文件管理的工作, 在博客搭建中, 它起到与Github沟通, 传输, 部署文件的工作.
安装可以参考廖雪峰的博客安装Git 三种系统都讲的比较细致.
- Windows用户可以在https://git-scm.com/进行下载安装
- Ubuntu/Debian用户使用
sudo apt-get install git
安装 - Mac用户可以用AppStore安装Xcode,Xcode集成了Git,不过默认没有安装,你需要运行Xcode,选择菜单“Xcode”->“Preferences”,在弹出窗口中找到“Downloads”,选择“Command Line Tools”,点“Install”就可以完成安装了
这个必须要做,否则后面的部署不能成功执行
安装完毕之后, 需要设定下自己的名字已经邮箱, 在命令行(git bash)中执行:1
2 git config --global user.name "Your Name"
git config --global user.email "email@example.com"
安装hexo
打开你的命令行工具(cmd, git bash, terminal …随便选一个就好,推荐windows用户用git bash, 就在自己的开始菜单里, 其他的用户天生就会命令行)
1 | npm install hexo-cli -g |
等一杯咖啡的时间, 安装好了之后, 看下hexo --version
能否成功执行.
1 | hexo --version |
github注册
Github是一个~与A站与B站齐名, 三大同性交友的网站~面向开源及私有软件项目的托管平台.
注册与使用Github的原因是它可以免费为你提供一个开放的托管静态页面的网站, 不限流量, 完全免费.
注册我就不提了, 注册好了以后, 点加号, 按New Repository, 新建一个名为[username].github.io的repo.
比如我的用户名为lchiffon, 新建的repo就是lchiffon.github.io
,建好就可以啦, 这步搞定.
博客构建
init
在一个空的文件夹中进入命令行工具, (可以试试点击右键,并点击 Git Bash Here, 如果没有, 可以选择重装git 或者查下cd这个命令怎么使用)
并执行:
1 | hexo init |
等一系列命令完成后, 执行
1 | hexo s |
当你看到以下命令代表执行成功, 可以用浏览器打开这个网页:http://localhost:4000/
来查看自己搭建的博客
1 | INFO Start processing |
localhost代表的是你自己的本地服务, 把这个分享给朋友可不能打开, 需要上传到github,来分享给其他人
写点什么
在source/_post文件夹中, 有一个hello-world.md
的文件, 按照这个例子写一个自己的文章,也是在这个文件夹中.
markdown的语法可以看这里
写好之后刷新下http://localhost:4000/
, 你就能看到自己的文章了~
提交到github
对于提交,需要修改文件夹中的_config.yml
, 把里面deploy相关的修改成:
1 | deploy: |
[username]替换成自己的用户名,不加方括号
然后使用1
2hexo g
hexo d
来推送到github
稍等一段时间,就可以在http://[username].github.io
来查看你自己的博客了~
其他问题
themes
基本的 theme就是你看到的挫样子, 可以去https://hexo.io/themes/选一款主题,并按照主题的readme去进行设置
一般操作是:1
git clone [themerepo] themes/[themename]
然后修改_config.yml
, 把里面theme: landscape
修改成:
1 | theme: [themename] |
之后可能依赖不同的theme去设置theme的参数(themes/[themename]/_config.yml
)文件
RSS
老bloger们都懂RSS是什么,也就是传说中的RSS订阅,生成方式是:
- 安装
npm install hexo-generator-feed
- 修改
_config.yml
1 | plugin: |
域名
申请域名,然后加入以下三个CDN记录
1 | @ A 192.30.252.153 |
并在自己的项目中写一个CNAME的文件里面包含自己申请的域名(不包含http://www部分)