Windows下使用HEXO + Github建立个人博客

发表于 | 分类于 |

前言

在Kevinzjy的怂恿下开了这个blog，打算用来记录一下平时的一些小技巧。那么自然，先从怎么开启这个blog开始记录好了。

安装Git & Node.js

从git官方网站下载适合自己操作系统的git安装包，打开安装。
然后下载Node.js安装包进行安装。

安装Hexo

打开bash，或者git bash，利用以下命令安装hexo

1
npm install hexo-cli -g

hexo初始化

找一个喜欢的文件夹作为blog根目录，在路径下打开bash，运行

1
2
3
4
5
6
7
8
hexo init
npm install
npm install hexo-deployer-git --save # 安装git插件
hexo clean
hexo g # == hexo generate 生成静态文件
hexo d # == hexo deploy 部署到远端（如github)

hexo s # == hexo server 启动本地web服务，用于预览

现在打开http://localhost:4000/应该就可以看到一个页面了。这就是你的blog在本地时候的样子。接下来我们要把它部署到网上。

获取github page

前往github, 登录账号。
点击new repository新建一个远程仓库,仓库名字必须是username/username.github.io
然后将clone or download下形如https://github.com/your-username/your-username.github.io.git的git路径复制下来
填入hexo根目录下的_config.yml中deploy字段，如下所示：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/your-username/your-username.github.io.git
  brach: master

然后再次运行

1
2
hexo g
hexo d

即可

修改hexo主题

推荐使用主题NexT，集简洁和优雅于一体，而且使用方便。
在bash下，切换到你之前选定的根目录文件夹，运行如下所示命令

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

完成后，打开刚刚那个_config.yml文件，找到theme字段，将值改为next

1
theme: next

之后重新产生静态页面并部署，就能看到主题改变。
其他主题还有很多，如果想试试别的主题可以参考hexo themes list

其他

设置背景图片

下载喜欢的图片，放到主题目录/source/images/
打开/theme/next/source/css/_custom/custom.styl,添加如下代码

1
2
3
4
body{
    background:url(/images/your-photo.jpg);
    background-attachment: fixed;    # 背景图片不跟随屏幕滚动
}

设置背景透明度

文章背景
打开/theme/next/source/css/_schemes/Pisces/_layout.styl,将.content-wrap下的background字段改成：

1
background: rgba(255,255,255, 0.6); # 0.6即为透明度

按钮背景
打开themes\next\source\css\_common\components\post\post-button.styl
将.btn下background字段改为:

1
background: transparent;

侧边栏背景（感谢Acris Liu的帮助）
之前一直没能找到直接修改侧边栏透明度的方法，在Acris的帮助下找到了。
在themes\next\source\css\_common\components\sidebar\sidebar.styl中.sidebar下

1
opacity: 0.6

菜单栏背景
themes\next\source\css\_schemes\Pisces\_layout.styl

1
2
3
.header_inner{
    background: rgba(255,255,255, 0.6);
}

LaTex equation support

Thanks to the post here.

Simple equation

$$\begin{equation}
e=mc^2
\end{equation}\label{eq1}$$

1
2
3
$$\begin{equation}
e=mc^2
\end{equation}\label{eq1}$$

Multi-line equation

$$\begin{equation}
\begin{aligned}
a &= b + c \
&= d + e + f + g \
&= h + i
\end{aligned}
\end{equation}\label{eq2}$$

1
2
3
4
5
6
7
$$\begin{equation}
\begin{aligned}
a &= b + c \\
  &= d + e + f + g \\
  &= h + i
\end{aligned}
\end{equation}\label{eq2}$$

版权声明： 本博客所有文章除特别声明外，均采用CC BY-NC-SA 3.0 CN许可协议。转载请注明出处！