preloader

曾梦想仗剑走天涯，后来 bug 多没去!

Mac 搭建基于 Github 的 HEXO博客

Menu

  教程  HEXO 

对于开发人员学习到的内容，都喜欢分享自己成果，最好的去处是论坛、博客之类，但是想要自己的个人博客，又想发布到 GitHub ，此时就可以利用 Hexo + Github 实现个人博客小站啦！

HEXO 安装本地

环境配置

  • Node.js
  • Git

安装可以参考官方文档
建议通过终端命令行安装

安装 Hexo

新建博客目录

$ npm install -g hexo-cli

初始化Hexo

创建一个目录用来作为你的blog目录

$ mkdir blog // 新建文件夹博客目录 自定义
$ cd blog // 访问目录
$ hexo init // 初始化hexo

启动Hexo

$ hexo server

可简写输入命令 

$ hexo s

返回结果：

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

启动服务后，本地浏览器 访问 http://localhost:4000

HEXO 配置到 github

注册Git

注册地址：GitHub

新建git库

新建仓库，名为用户名.github.io固定写法，如seniorbrother.github.io。必须是自己的 GitHub 个人资料名。

同步本地博客到Github

官方文档传送门：Hexo 部署

  • 编辑 hexo 配置文件：
$ cd blog
$ vim _config.yml
  • 在文件最后，按 i 输入模式
deploy:
  type: git
  repository:
    github：https://github.com/SeniorBrother/seniorbrother.github.io.git // 个人项目 Https 地址
    aliyun：https://code.aliyun.com/23165-Sunrise/note.git // aliyun 项目 Https 地址
  branch: master   // master分支

此处如果你有 aliyun 或者 coding 等git服务平台账号 也可以配置同步到其他账号的版本库

  • 安装插件 
$ npm install hexo-deployer-git --save
  • 生成文件推送线上
$ hexo clean
$ hexo generate
$ hexo deploy

等待几分钟浏览器输入：seniorbrother.github.io

HEXO 基本使用方法

基础配置

官方文档传送门：hexo配置

  • 编辑 _config.yml
$ vim _config.yml
  • 参考配置
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site                 ##修改以适应搜索引擎的收录
title: 渡-心记            ##定义网站的标题
subtitle: 心记             ##定义网站的副标题
description: 曾梦想仗剑走天涯，后来 bug 多没去!          ##定义网站的描述
author: liudou      ##定义网站的负责人
language:              ##定义网站的语言,默认zh-Hans
timezone:              ##定义网站的时区

# 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: /      ##定义所在Web文件夹在哪个目录
permalink: :year/:month/:day/:title/  ##定义时间格式
permalink_defaults:

# Directory
source_dir: source   ##定义从哪个文件夹获取博客资料
public_dir: public   ##定义生成静态网站到哪个文件夹

archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

#highlight:  enable: false

# 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: false
  line_number: true
  auto_detect: false
  tab_replace:

search:
  path: search.json
  zipPath: search.zip
  versionPath: searchVersion.txt
  field: post
  #field: post, page or all
# 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  ##定义每一页多少条博客
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Annie  ##定义使用的主题

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy: # 配置 本地同步部署到 git
  type: git
  repo:
        github: https://github.com/SeniorBrother/sunrise.github.io.git # 项目 Https 地址 同步到git库
        aliyun: https://code.aliyun.com/23165-Sunrise/note.git
  branch: master

文章编辑

  • 在自己博客目录输入以下命令：
hexo new "Hello" // 此处"文章名称"
  • 在 blog/source/_posts/目录， 用编辑器打开 md 文件：
---
title: Hexo安装 #文章标题
date: 2018-05-20 13:14:00 #文章创建时间
categories: "Hexo教程" #文章类别可以省略
tags: #文章标签 可以省略
- 标签1
- 标签2
---
此处编写内容
  • 本地查看文章效果
$ hexo s

访问：http://localhost:4000

  • 推送文章
$ hexo generate // 生成静态文件
$ hexo deploy // 推送部署到 git

总结

整个 Hexo 搭建过程，一定要做好准备工作：
git 库配置 ，其次不建议用 域名重定向 把 github 博客页面到自己的域名下，国外网站访问真心是慢。
建议保存文章名.md 文件到现实版本库

ESC