Hexo+GitHub搭建个人博客

前言

博客,Blog,是使用特定的软件,在网络上出版、发表和张贴个人文章的人,或者是一种通常由个人管理、不定期张贴新的文章的网站。

目前国内外有非常多的博客站点和社区,比如CSDN和Blogger。本文利用HexoGitHub构建个人博客,希望对大家有帮助。

准备

系统环境

Windows/Linux/macOS(推荐Windows)

注册准备

GitHub

GitHub

https://github.com/

软件安装

Git + Node.js

Git

https://git-scm.com/

Node.js

http://nodejs.cn/

环境部署

1. 下载安装Git

网址:https://git-scm.com/downloads

注意:以Windows环境为例,一直”下一步”到安装完成,可以右键看到Git Bash Here和Git GUI Here。

2. 下载安装Node.js

网址:http://nodejs.cn/download/

3. 注册GitHub

网址:https://github.com/join?source=header-home

注意:用户名和邮箱是常用的,需要以后各种链接都会建立在用户名和邮箱上,所以确定好后尽量不要修改。

4. 新建项目库

网址:https://github.com/new

注意:每个帐号只能有一个仓库来存放个人主页,而且仓库的名字必须是

[username]/[username].github.io(大小写变化无影响),这是特殊的命名约定,你可以通过http://[username].github.io 来访问你的个人主页。

5. 生成SSH key

上传文件需要配置ssh key,不然无法上传,需要先查看本地是否含有SSH Key,若含有,则需要将本地的Key删除。

检查本地SSH key:

ls -al ~/.ssh

设置user name和email(设置常用即可,无需与GitHub信息相同):

git config --global user.name ""

git config --global user.email ""

生成SSH key(一直Enter,可不设置密码,设置密码需记住):

ssh-keygen -t rsa -C ""

生成后,可在~/.ssh/下生成了两个文件id_rsa 和 id_rsa.pub。

6. 链接Git和GitHub

本地Git和远程GitHub通过SSH key链接,需要在GitHub上添加SSH key。

网址:https://github.com/settings/keys

查看本地SSH key:

cat ~/.ssh/id_rsa.pub

添加SSH Key(命名随意,语义化即可)

添加SSH Key

SSH Key测试连接:

结果大致如下格式:

搭建博客

1. 安装Hexo

npm install -g hexo-cli

2. 初始化建站

hexo init

cd

npm install

新建完成后,指定文件夹的目录如下:

.

├── _config.yml

├── package.json

├── scaffolds

├── source

| ├── _drafts

| └── _posts

└── themes

查看应用程序如下(可按需移除,一般可不动):

$ cat package.json

{

"name": "hexo-site",

"version": "0.0.0",

"private": true,

"hexo": {

"version": "3.4.2"

},

"dependencies": {

"hexo": "^3.2.0",

"hexo-deployer-git": "^0.3.1",

"hexo-generator-archive": "^0.1.4",

"hexo-generator-category": "^0.1.3",

"hexo-generator-index": "^0.2.0",

"hexo-generator-tag": "^0.2.0",

"hexo-renderer-ejs": "^0.3.0",

"hexo-renderer-marked": "^0.3.0",

"hexo-renderer-stylus": "^0.3.1",

"hexo-server": "^0.2.0"

}

}

3. 配置_config.yml

网址:

https://hexo.io/zh-cn/docs/configuration.html

编辑_config.yml如下:

# Hexo Configuration

##Docs: http://hexo.io/docs/configuration.html

##Source: https://github.com/hexojs/hexo/

# Site 这下面的几项配置都很简单,你看我的博客就知道分别是什么意思

title: blog name #博客名

subtitle: ********** #副标题

description: ******************* #用于搜索,没有直观表现

author: authorname #作者

language: zh-Hans #语言

timezone: #时区,此处不填写,hexo会以你目前电脑的时区为默认值

# URL 暂不配置,使用默认值(用于绑定网址)

## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

url: http://yoursite.com

root: /

permalink: :year/:month/:day/:title/

permalink_defaults:

# Directory 暂不配置,使用默认值

source_dir: source

public_dir: public

tag_dir: tags

archive_dir: archives

category_dir: categories

code_dir: downloads/code

i18n_dir: :lang

skip_render:

# Writing 文章布局等,使用默认值

new_post_name: :title.md # File name of new posts

default_layout: post

titlecase:false # Transform title into titlecase

external_link:true # Open external links in new tab

filename_case: 0

render_drafts: false

post_asset_folder: false

relative_link: false

future: true

highlight:

enable: true

line_number: true

tab_replace:

# Category & Tag 用于文章标识,按需配置

default_category: uncategorized

category_map:

tag_map:

# Date / Time format 时间格式,使用默认值

## Hexo uses Moment.js to parse and display date

## You can customize the date format as defined in

##http://momentjs.com/docs/#/displaying/format/

date_format: YYYY-MM-DD

time_format: HH:mm:ss

# Pagination

## Set per_page to 0 to disable pagination

per_page: 10 #每页显示的文章数,0表示不分页

pagination_dir: page

# Extensions 插件配置,暂时不配置

## Plugins: http://hexo.io/plugins/

## Themes: http://hexo.io/themes/

plugins:

- hexo-generator-feed

theme: next #使用的主题

feed: #之后配置rss会用,此处先不配置这个

type: atom

path: atom.xml

limit: 20

# Deployment 用于部署到github,

##Docs: http://hexo.io/docs/deployment.html

deploy:

type: git

repo:ssh://git@github.com/[githubname]/[库名].github.io

branch: master

4. 调试

hexo s --debug

命令行输出:

...

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时浏览器输入http://localhost:4000/可预览如下界面,按Ctrl+C可停止调试。

初始页

网址:https://hexo.io/zh-cn/docs/commands.html

配置主题

Hexo开发者有很多主题可供选择,也有很多特效可以实现,具体可查看网址(本教程以安装next主题为例)。

网址:

https://hexo.io/themes/

注:站点配置文件为./_config.yml,主题配置文件为./themes/next/_config.yml。

1.安装next

cd your-hexo-site #进入Blog文件夹

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

2.站点配置文件启用主题(参见上述配置)

theme: next

3.调试验证

hexo s --debug

4.主题设定

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme:

Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白;

Mist - Muse 的紧凑版本,整洁有序的单栏外观;

Pisces - 双栏 Scheme,小家碧玉似的清新。

以选择 Pisces Scheme为例,修改如下:

#scheme: Muse

#scheme: Mist

scheme: Pisces

5.站点配置文件设定语言

language: zh-Hans

目前Hexo支持语言可参照官网:

6.设置菜单

启用即可,更多说明参见官网。

示例:

menu:

home: /

archives: /archives

#about: /about

#categories: /categories

tags: /tags

#commonweal: /404.html

7.设置头像

将图片防置在主题目录下,或使用网络图片链接。修改avator,为站点内图片,如:

avatar: /images/avatar.png

也可为网络图片,如:

avatar: http://example.com/avatar.png

8.设置favicon

按要求上传图片到主题文件夹即可。

favicon:

small: /images/favicon-16x16-next.png

medium: /images/favicon-32x32-next.png

apple_touch_icon:/images/apple-touch-icon-next.png

safari_pinned_tab: /images/logo.svg

9.其他功能

设置评论区:next内置数个评论站点,按要求设置即可。设置首页文章预览:

auto_excerpt:

enable: true

其它参见官网和谷歌百度。

10. bug留意

在社区账号设置后会产生main.css生成错误,Social Links栏目按需开启(需处理bug)。

# Social Links.

# Usage: `Key: permalink || icon`

# Key is the link label showing to end users.

# Value before `||` delimeter is the target permalink.

# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.

#social:

#GitHub: https://github.com/yourname || github

#E-Mail: youremail || envelope

#Google: https://plus.google.com/yourname || google

#Twitter: https://twitter.com/yourname || twitter

#FBPage: https://www.facebook.com/yourname || facebook

#VK Group: https://vk.com/yourname || vk

#StackOverflow: https://stackoverflow.com/yourname || stack-overflow

#YouTube: https://youtube.com/yourname || youtube

#Instagram: https://instagram.com/yourname || instagram

#Skype: skype:yourname?call|chat || skype

social_icons:

enable: false

icons_only: false

transition: false

常规使用

1. 新建文章

hexo new [title]

此时会有新文章显示在[blog-path]\source\_posts

文章前缀信息如下:

---

title: HEXO

date: 2018-04-24 19:52:25

tags:

- Hexo

- Github

categories: Blog

---

hexo文章均采用markdown文件,可用Sublime等编辑器修改。

2. 新建目录

博客中关于、标签和分类等栏目无文件,需要个人手动创建。

新建目录:

hexo new page categories[tags\about]

设置目录:

categories:

---

title: categories

date: 2018-04-23 20:23:17

type: "categories"

layout: "categories"

---

tags:

---

title: categories

date: 2018-04-23 20:23:17

type: "tags"

layout: "tags"

---

3.生成静态页面并push到github

hexo d -g

此时前台博客就可以看到如下文章信息更新了。

博客首页

参考文章

1.https://xuhaoblog.com/2016/05/06/hexo-github-pages/

3.https://hexo.io/

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180806B0OLV300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券