avatar

目录
Mac如何搭建hexo博客

写在前面

  • Why not WordPress
    WordPress拥有十分强大的插件系统,基本可以满足所有的需求,但尝试了一段时间之后还是果断放弃了。就是因为WordPress虽然可以安装使用Markdown插件,但是兼容性很差,很多时候会出现乱码,并且加载之后会拖慢整个网站的访问速度,所以果断放弃了。

  • Why Hexo
    其实最开始的目的很简单,因为发现网上使用github+hexo搭建博客的人很多,自然教程也好找。后来偶然的在知乎的一个链接上看到才知道是因为hexo的作者无法忍受jeykll和octopress的提交速度,因此决定自己造了一个叫Hexo的轮子。关于名字的来源,大概是因为octopress取自8进制,而Hexo表示16进制。

  • Why Github (Gitlab or Coding)
    访问速度快,且无需再购买VPS服务器。

网上关于github+hexo搭建博客的教程很多,但大多使用的Windows系统,本文以Mac系统为例,通过Hexo+Github搭建博客,希望借此抛砖引玉。

安装Nodejs

这一步很简单,访问Nodejs官网(https://nodejs.org/en/download/)下载、安装即可。

购买域名

  • 登陆GoDaddy主页并注册账号
  • 输入想要注册的域名,并点击搜索域名(选择.online作为网站后缀因为便宜)

  • 加入并进入购物车

  • 选择支付方式

  • 查看购买结果

配置Github

注册Github账号

建立博客仓库

  • 建立username.github.io的仓库名称(username为用户名)。

本地Git连接Github

a.在Terminal中运行ls ~/.ssh检查是否存在ssh密匙文件id_rsa(私匙)和id_rsa.pub(公匙)。

如果没有则在Terminal中运行ssh-keygen -t rsa -C “引号中填写注册Github邮箱”。

Code
ssh-keygen -t rsa -C "引号中填写注册Github邮箱"

b.将公匙添加至GitHub

使用cat命令查看公钥内容,复制里面的公匙粘贴至https://github.com/settings/keys,然后选择New SSH key, title可不填写,将复制的公匙粘贴到key中再点击Add SSH key



c.检测连接是否成功

在Terminal命令行输入ssh -T git@github.com成功结果显示如下:

Mac本地配置Hexo

  • 安装Hexo
Code
sudo npm install -g hexo
  • 初始化Hexo

创建一个目录MyBlog用来作为博客目录,并在该目录中进行Hexo的初始化。

Code
hexo init Myblog #创建博客存放目录MyBlog并初始化
cd Myblog/
sudo npm install
sudo npm install hexo-server
sudo npm install --save hexo-deployer-git
  • 生成静态页面并打开Hexo本地服务
bash
hexo g
hexo s

若成功则显示如下:

在浏览器中输入http://localhost:4000/ 即可看到默认主题的默认页面,效果如下:

  • 修改配置文件_config.yml

修改方法如下:

Code
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository:
github: git@github.com:pele0412/pele0412.github.io.git
branch: master

绑定个人域名

  • 创建CNAME文件并添加域名

在MyBlog的soruce文件夹下创建CNAME文件,添加购买到的域名。

Code
cd MyBlog/source/
vim CNAME

使用DNSPod解析DNS

  • 进入我的域名管理界面点击管理DNS

  • 找到域名服务器处点击更改

  • 点击输入我自己的域名服务器(高级)

  • 输入DNS地址f1g1ns1.dnspod.netf1g1ns2.dnspod.net并点击保存

  • 登陆DNSPod主页点击右上角管理控制台

  • 点击左面功能栏我的域名并添加从GoDaddy购买的域名

  • 点击我的域名并按照篮筐的内容添加,红框的内容为自动生成

查看构建好的博客

在Terminal中运行如下命令,在浏览器中输入购买到的域名即可显示博客页面。

bash
cd MyBlog
hexo clean
hexo g
hexo d

发布文章

在Terminal中运行hexo new ‘第一篇文章’;引号中填写文章标题。

bash
cd MyBlog
hexo new '我的文章'

我的文章.md文件生成于/MyBlog/source/_posts文件夹下,
文章编辑完毕后运行如下命令,登陆购买到的域名即可查看到。

bash
hexo clean
hexo g
hexo d

更改主题

可以同过查看hexo主题排名进行选择,以next主题为例:

bash
cd Myblog themes/
git clone https://github.com/iissnan/hexo-theme-next themes/next

下载完毕后按照如下进行修改

bash
npm install hexo-renderer-jade --save
npm install hexo-renderer-sass --save
vim MyBlog/_config.yml
bash
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next #theme后面填写主题名称

更换Next主题的博客页面如下:

构建图床

bash
cd MyBlog/source
mkdir image

将图片存放于image下,然后引用即可。

引用地址为http://username.github.io/image/picture

username为创建Github所使用。

参考资料

Hexo官方说明文档

文章作者: Pele
文章链接: http://lilibei.net/2016/10/16/MAC%E5%A6%82%E4%BD%95%E6%90%AD%E5%BB%BAgithub%E5%8D%9A%E5%AE%A2/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Pele' blog
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论