『Hexo』使用Hexo搭建GitHub博客

『Hexo』使用Hexo搭建GitHub博客


前言:

​ 谈起这个博客的由来,真的挺不容易的。一年前兴奋地买了域名,后来因为很多东西都不具备实现这个模版博客的能力,遂搁置了域名,选择了简书。有点笨,这一次也折腾了两三个晚上,总算把它搭建起来了。


环境准备

  • git搭建 :git教程
  • node.js : node.js download
  • git主要用于将代码同步到GitHub平台,node.js主要用到了npm这个包管理器,方便我们快速搭建Hexo环境。
  • 个人的主机环境为:MacOS

注册Github

  • 我们的主要目的就是把本地的静态网站托管到GitHub这个平台上。
  • Tips: 我遇到的一个坑就是,我用的是QQ邮箱注册,GitHub验证邮件被拦截了,貌似163邮箱也会拦截。一定要验证邮箱,否则即使你博客搭建好了,托管到GitHub上面,也会一直404无法打开。

Quick Start

  • 安装Hexo
sudo npm install hexo-cli -g

Hexo官方文档:Hexo

  • 利用Hexo初始化一个博客文件夹
hexo init [文件夹]
  • npm install 命令用来安装模块到node_modules目录。
cd [文件夹]            //进入到博客文件夹
npm install           //利用npm install命令安装模块node_modules

关于npm的详细使用,参照文档,或者npm 模块安装机制简介

至此,一个博客已经搭建好了,但是我们还没办法看到它。接下来就利用Hexo命令来启动我们的博客。

hexo g              //利用Hexo 生成静态页面
hexo s              //启动本地服务

你一定迫不及待想看看这个东西给你带来了什么样的惊喜。打开浏览器,http://localhost:4000,你就可以看到一个模版博客已经出现在你面前了,虽然这不是你最终想要的,不过也算是让我们眼前一亮。

命令倒是执行了几个了,但是我们不知道它到底做了些什么。先来看看吧。

ls      //查看文件目录, 当然一些隐藏文件无法查看, 没关系,ls -al即可。

暂时忽略其他文件是干什么的,先看看 _config.yml,这是我博客的设置。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Shawenlx                             #博客标题
subtitle:                                   #副标题
description: I love code and share.         #个人描述
author: Liuxi                               #作者名
language: en                                #站点语言,如果是中文,把en替换成zh-CN
timezone:                                   #同步时区

# URL
url: /
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
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map: categories
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
theme: next                 #主题模版,搜索 ./themes 文件夹下的主题,此处我用的NexT模版

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

Tips: 当我们着手修改这个文件的时候,字段名以及:后面,切记一定要加一个空格!我一开始也遇到这个问题,执行hexo g命令的时候,就会报错提示我_config.yml文件无法解析。


将博客托管到Github平台

  • 创建一个GitHub仓库,new repository
  • Repository name 栏中,输入 your user name.github.io,譬如我的GitHub用户名是shawenlx,所以就建立工程名为:shawenlx.github.io
  • 配置好本地的SSH Key。
  • 拥有了个人的GitHub Pages后,再回到Hexo的_config.yml文件, 参照我的配置保存即可。
deploy:
  type: git
  repo: https://github.com/shawenlx/shawenlx.github.io.git
  branch: master
  • 最后利用hexo命令,将博客推送到Github上。
hexo clean              #推送前,先清除下本地数据库,防止缓存导致上传不成功
hexo d -g               #利用这个组合命令,将博客上传到github上。
  • 当你打开浏览器,输入your_user_name.github.io,就可以看到你托管到平台上的数据了。

关于博客主题模版

  • 网上有各种各样的模版,我用的NexT, 参照官方文档进行配置就可以了。目前博客还在完善,特此记录本博客的搭建经历。

关于管理博客内容


最后

以后简书会同步更新这个博客的内容。

复习本博客链接:shawenlx.cn

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容