使用 Github + Hexo 建立自己的博客

Logo

自从我开了这个博客后,就有很多小伙伴问我怎么弄的?(好吧,其实就一个(*/ω\*))
为了教她,也为了给各位看官一点参考。我写了这篇文章。
因为她比较小白,所以这篇文章会写得比较详细。

准备工作

  1. 一个 Github 账号。 <-我们要使用它提供的 Github Pages 服务来搭建博客 https://github.com/
  2. Node.js <- Hexo 依赖于此 https://nodejs.org/zh-cn/
  3. Git <- 用来发布博客 https://git-scm.com/
  4. Hexo <- 博客框架 https://hexo.io/zh-cn/index.html
  5. [非必需]Chocolatey <- 用来安装 Node.js 和 Git https://chocolatey.org/

Start

安装 Node.js & Git

使用 安装包 安装(小白看这里)

首先去官网下载各自的安装包。(地址在上面)
其中 Node.js 一般会有两个版本;都可以用。
Git 的官网是英文的,点 [Downloads for Windows] 下载。

下载好后,双击安装包,就像安装普通软件一样安装。

安装好后打开按 Win键 + R,输入 cmd,回车。
在弹出的黑框框中分别输入

$ node -v
$ npm -v
$ git version

如果显示的是各种的版本号,说明安装成功

查看版本号

使用 Chocolatey 安装

我比较喜欢用 Chocolatey 来安装;比较方便。
虽然赶 apt 还有一段距离,但确实是 Windows 下最好的包管理程序。
有空我会写一篇比较详尽的 Chocolatey 使用教程。

首先安装 Chocolatey
用管理员身份打开 CMD,输入一下命令,回车

$ @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

然后安装 Node.js
在 CMD 中键入:(同样是以管理员身份运行)

$ choco install nodejs

出现一下文字说明它安装完成了


安装 Node.js

然后安装 Git

$ choco install git
安装 Git

同样的,验证一下是否安装成功
关闭 CMD 然后重新打开它(刷新 %PATH% )键入

$ node -v
$ npm -v
$ git version

如果显示的是各种的版本号,说明安装成功

查看版本号

注册 Github 账号

如果你已经拥有,请跳过
打开 https://github.com/ 分别填上 名字邮箱密码Sign up to GitHub

注册 Github 账号

然后前往自己刚才填写的邮箱,点开 Github 发送给你的注册确认信,确认注册

创建代码库

登陆之后,点击页面右上角的加号,选择 New repository

创建代码库

Repository name 下填写 [你的名字].github.io(填写注册时的名字,英文),Description (optional) 下填写一些简单的描述(不写也没有关系)

创建代码库

然后你会看到
创建代码库

选择右侧的Settings,向下拖动,直到看见GitHub Pages

创建代码库

点击 Automatic page generator,Github 将会自动替你创建出一个 gh-pages 的页面。 如果你的配置没有问题,那么大约 15 分钟之后,[你的名字].github.io 这个网址就可以正常访问了

安装 Hexo

按照官网的说法,Hexo是一个 快速、简洁且高效的博客框架
我们要用它来将 Markdown 渲染成网页,然后发布到 Github 上。

Hexo 通过 Node.js 来安装
在 CMD 中输入:

$ npm install hexo-cli -g

你会看到


安装 Hexo

然后输入

$ npm install hexo -g
安装 Hexo

等它安装好了,我们验证一下是否安装成功
输入

$ hexo -v
安装 Hexo

下面,初始化我们的 Hexo
找一个地方新建一个文件夹,这个文件夹将是用来存放你博客的地方
切换的刚刚新建的文件夹下,初始化 Hexo:(将[你新建的文件夹的路径]改为你刚刚新建文件夹的路径)

$ cd [你新建的文件夹的路径]
$ hexo init

初始化 Hexo

因为我们要用 Git 来发布博客,所以还需要安装一个名为 hexo-deployer-git 的插件
在 CMD 中输入

$ npm install hexo-deployer-git --save
安装 hexo-deployer-git

此时的目录结构↓

.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json

配置 Deployment

首先,你需要为自己配置身份信息,打开命令行,然后输入:

$ git config --global user.name "[yourname]"
$ git config --global user.email "[youremail]"

修改 _config.yml

按照一下注释按需修改

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site #站点信息
title:  #标题
subtitle:  #副标题
description:  #站点描述,给搜索引擎看的
author:  #作者
email:  #电子邮箱
language: zh-CN #语言
# URL #链接格式
url:  #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
  enable: true #是否启用
  line_number: true #显示行号
  tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数,设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论,替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署,将 lmintlcx 改成用户名
deploy:
  type: git
  repo: git@github.com:[你的名字]/[你的名字].github.io.git
  branch: master

注意:

安装 NexT 主题

使用 Hexo 的最大好处就是非常的自由,你可以完全掌握你的博客,想把它弄成什么样都可以。
因此,我们可以安装跟好看的主题来替换 Hexo 自带的 landscape 主题。
我推荐使用 NexT 主题(就是你们现在看到的样子),因为它简洁大方,比较符合我的审美。
而且它也是所有主题中,获得 stars 最多的。(在 Github 中,stars 越多,说明该项目越受欢迎。)

使用一下命令安装 NexT

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

不嫌弃的话也可以安装我修改过的版本(*/ω\*) -> NexT

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

安装好后打开 Hexo 文件夹中的 _config.yml,找到 theme: landscape,将其改为theme: next

theme: landscape -> theme: next

重新部署一遍 Hexo,开启 Hexo 的本地服务器

$ hexo g
$ hexo s

现在访问 http://localhost:4000/ 看看效果。(๑•̀ㅂ•́)و✧

编写文章

引用一段来自官方的文档

你可以执行下列命令来创建一篇新文章。
$ hexo new [layout] <title>
您可以在命令中指定文章的布局(layout),默认为 post,可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

创建文章后,可以看见 source\_posts\ 下有一篇新建的以 .md 为后缀文章
打开它可以看见

---
title: hello-world   //在此处添加你的标题。
date: 2014-11-7 08:55:29   //在此处输入你编辑这篇文章的时间。
categories: Exercise   //在此处输入这篇文章的分类。
toc: true  //在此处设定是否开启目录,需要主题支持。
---

在之后空白的地方用 Markdown 编写文章。

更多操作

$ hexo generate  # 将 Markdown 编译成静态网页
$ hexo deploy  # 部署 Hexo 到服务器,也就是到 Github
$ hexo server  # 启动一个本地服务器,默认地址是 `http://localhost:4000`

# 缩写
$ hexo g  # 等同于 hexo generate
$ hexo d  # 等同于 hexo deploy
$ hexo s  # 等同于 hexo server

$ heeo d -g # 等同于 hexo deploy + hexo generate


原文地址:https://mogeko.github.io/2017/002/
欢迎关注我的博客 (・ω・) ノ:Mogeko`s Blog

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

推荐阅读更多精彩内容