Mac下用hexo+anatole主题+github pages搭建个站

sudo -i

安装教程

一、安装Git

安装Git请参考教程:https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git

二、安装Node.js

安装Node.js请访问官网下载并安装:https://nodejs.org/zh-cn/

三、安装hexo-cli

  • 取得mac root权限

由于安装hexo-cli会写入mac系统文件,所以需要root权限安装。
首先,打开mac终端(点击mac右上角搜索图标,在弹出的搜索框中输入“终端”并回车),输入命令:

sudo -i

回车

sudo -i

根据提示输入mac密码回车即可(输入密码不会显示在终端上,只管输入完后回车即可)

  • 安装hexo-cli接下来在取得root权限的终端中输入命令
npm install -g hexo-cli
install hexo-cli

当出现如下所示界面即表示安装成功:

install hexo-cli success

四、建站

  • 新建文件夹“hexo”作为你的网站根目录
create hexo folder
  • 初始化hexo

新开一个终端窗口,以普通用户身份运行(为什么要新开窗口以普通用户身份运行?因为如果以root身份初始化hexo会将“hexo”目录下的所有文件权限设置为只有System用户才有读写权限,极不方便后续的修改操作)

执行如下命令初始化hexo

hexo init <folder>

其中<folder>为你的网站根目录路径,如果你不知道你的目录路径,你可以使用command+C快捷键复制你的hexo文件夹,然后再用command+V粘贴到终端中,这里我的网站根目录路径是/Users/hujun/Data/hexo

init hexo

当出现如下所示界面时即表示初始化完成:

init hexo success
  • 安装Visual Studio Code

安装请参考官网安装:https://code.visualstudio.com/

安装完后请选中菜单栏的“文件”-“打开…”按钮打开刚才创建的“hexo”文件夹

open hexo

在Visual Studio Code打开hexo文件夹之后,选中菜单栏的“查看”-“集成终端”按钮打开终端:

open terminal

终端会出现在Visual Studio Code的右下角:

terminal
  • 安装hexo所需的package

在Visual Studio Code终端中执行命令:

npm install
  • 运行hexo server

执行完npm install后执行hexo shexo server命令即可使hexo服务端运行起来

hexo s
hexo server

根据提示,在浏览器中访问http://localhost:4000会出现如下页面:

hello world

至此,你已经在本地运行起来了hexo!

五、更换hexo主题

  • 选择主题

hexo官网提供了很多主题库(地址:https://hexo.io/themes/),你可以在这里挑选你喜欢的主题然后应用到你的个站中(点击主题名称可以跳转到主题的Github地址):

thems

我个人偏向于极简风,这里我选择的是Anatole主题:https://github.com/Ben02/hexo-theme-Anatole

安装Anatole主题可以参考该主题作者编写的安装文档:https://github.com/Ben02/hexo-theme-Anatole/wiki

安装主题其实就是将主题代码拷贝到你的网站的thems文件夹下,获取代码方式一般有两种:

  1. 用git clone,好处是方便拉取最新代码(推荐使用Git图形化界面工具SourceTree Clone代码)
  2. 直接下载
install anatole

安装后的目录结构如下图:

installed anatole
  • 应用Anatole主题

在Visual Studio Code终端按下control+C快捷键,先停止网站服务

1.将网站根目录下的_config.yml的配置theme修改为anatole并保存,注意“anatole”前面有一个空格,这是YAML的语法规定)。

modify theme

2.在Visual Studio Code终端执行如下命令安装Anatole主题需要的插件

npm install –save hexo-renderer-jade hexo-generator-archive
install anatole plugin

3.在_config.yml文件的末尾,添加如下配置:

# anotatearchive_generator: per_page: 0 yearly: false monthly: false daily: false
anatole config

执行hexo s命令查看应用的主题更改,可以看到页面已经变成了Anatole的主题风格:

apply anatole theme

六、hexo的个性化

可以参考hexo官方文档https://hexo.io/zh-cn/docs/configuration.html修改_config.yml的配置,以下是我的一些简单修改:

modify config

头像路径如下:

avatar path

将Anatole主题右上角头像修改为

link(rel=”short icon”, href= config.avatar,type=”image/x-icon”)
head avatar

将Avatole主题左侧头像修改为

img(src= url_for(config.avatar),style=”width:127px;”)
sidebar avatar

Avatole主题默认网站title与文章title都是大写显示的,若不喜欢这样的显示,可以更改sidebar.jademixins.jade相应的样式:

modify sidebar

修改为:

h3(title=””,style=”text-transform:none;”)
modify mixins

修改为:

h3(style=”text-transform:none;”)

七、创建文章

使用如下命令即可快速生成文章MarkDown文件:

hexo new <title>

其中<title>为文章标题,在此我创建了一篇名为“machineKey”的文章:

create new post

如果对MarkDown的语法不太熟悉,可以使用有道云笔记的MarkDown编辑器功能,然后将编辑器中的MarkDown代码复制粘贴到mackineKey.md代码后面:

create markdown by youdao
youdao toolbar

八、部署到Github Pages

  • 注册Github账号

没有Github账号的请到Github官网注册:https://github.com

  • 新建Github Pages仓库按下图操作新建仓库:
create new repository

仓库名称请务必填写你的Github用户名.repository.io,且务必选中Public:

github pages repository

点击Create repository按钮完成Github Pages仓库的创建。

npm install hexo-deployer-git –save

安装完成后,将如下配置添加到你的_config.yml文件中:

deploy: type: git repo: <repo>

其中<repo>为刚创建的Github Pages仓库的地址,格式为:https://github.com/你的Github用户名/你的Github用户名.github.io.git

配置完成后,运行命令hexo ghexo generate生成静态文件(如果觉得文件有缓存,还可以先运行hexo clean命令,再运行hexo g):

hexo g

再运行hexo dhexo deploy命令发布hexo到Github pages:

hexo d

回车后会提示你输入Github账户名及密码,输入后回车即可。

至此,你已成功部署到Github Pages,访问你的Github用户名.github.io即可访问你的hexo网站。

九、绑定到自己的域名

  • 域名解析CNAME你的Github用户名.github.io访问你的域名服务商进行域名解析设置,本人在万网购买的域名,解析设置如下:
domain resolution
  • source文件夹下添加CNAME文件文件内容为你的域名:
CNAME

再次运行命令hexo ghexo d发布到Github Pages,待域名解析生效后即可用你的域名访问你的hexo网站。

1 Reply to “Mac下用hexo+anatole主题+github pages搭建个站”

  1. Greetings from Idaho! I’m bored to tears at work so I decided to browse your blog on my iphone during lunch break.
    I really like the knowledge you provide here and can’t
    wait to take a look when I get home. I’m amazed at how quick your blog
    loaded on my phone .. I’m not even using WIFI, just 3G ..
    Anyways, awesome blog!

发表评论

电子邮件地址不会被公开。 必填项已用*标注