使用 Hexo 搭建属于自己的github.io

在你逛技术贴的时候,你是否有看到过xxx.github.io的站点,你是否会好奇,这些技术大佬不仅精通本职工作的语言,还精通Web前端?今天我们就自己手搭一个属于自己的git.io的站点,用来记录自己的博文.

准备工作,首先你需要安装最新的 Node.js ** 和 **Git;

这里我就默认你本地环境以及安装好这些了.

下面我们正式开始

创建自己的github.io

创建自己的xx.github.io,值得注意的是项目名称是:你github账号 + github.io;

设置主题

选择你的github.io仓库,进入设置界面. 设置你喜欢的主题.

设置完成之后,需要你生成一次commit;

验证效果

执行完成上面的操作,你就可以验证下GitHub Page的效果了.

搭建Hexo环境

安装Hexo-cli 客户端

1	npm install -g hexo-cli

验证Hexo 客户端

1 2	hexo -v hexo version

建站

选择你一个文件夹作为你的站点,这个文件夹最好是使用github管理起来,并将仓库设置为私有的仓库.

hexo init <folder>

cd <folder>

npm install

执行完上述操作之后,你就拥有一个默认的站点了,你可以试着运行下,看是否初始化成功.

hexo s

执行hexo s命令之后,你就可以在浏览器输入localhost:4000访问站点了.

修改配置文件_config.yml

hexo 初始化之后,生成的站点都是默认设置, 你可以修改 _config.yml文件来定制化.

比如下面的配置:

# Site
title: 老柯南
subtitle: 晴耕雨读
description: 告诉自己可以做好，即使是新事物，也一样可以做好
keywords: IT & LIFE
author: iconan
language:
timezone:

将站点部署到github.io

想要将站点部署到GitHub,我们还需要给hexo安装点插件.

安装 hexo-deployer-git

1	$ npm install hexo-deployer-git --save

修改_config.yml部署地址

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://ioldconan.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:


# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/ioldconan/ioldconan.github.io.git

部署到GitHub.io

上面设置好之后,就可以将站点部署到GitHub.io了.

1
2

hexo g -d

等待一会之后,你就可以直接访问你hexo 主题的GitHub站点了.

设置hexo 主题

默认的主题看起来不是那么悦目,接下来,我们来给站点设置主题

下载主题

我们可以从Hexo主题商店选择主题.

下载你想要的主题,并将主题文件夹存放在 /theme目录下

修改_config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-next

完了之后再部署下,你就可以看到全新的站点了.

其他

上传图片

如果想上传自己的图片,我们也需要安装一个图片的插件

1 2	npm install https://github.com/CodeFalling/hexo-asset-image --save

只展示部分内容

需要显示的内容
<!-- more -->
点击进入详情页面才会展示的内容.

hexo 命令

hexo new post fileName   新建发布文件

hexo s                   本地部署

hexo clean               clean

hexo g -d                部署到远端

hexo v                   hexo 版本信息