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

Posted on by hujun
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 s或hexo 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.jade与mixins.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 g或hexo generate生成静态文件(如果觉得文件有缓存，还可以先运行hexo clean命令，再运行hexo g)：

hexo g

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

hexo d

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

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

九、绑定到自己的域名

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

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

发表评论

邮箱地址不会被公开。