利用Hexo+GitHub Page搭建一个个人博客网站

Hexo
Hexo

什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑,Markdown 的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的 HTML 标记语言来说,Markdown 可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。

推荐阅读Markdown——入门指南

如何安装Hexo

安装 Hexo 只需几分钟时间,若您在安装过程中遇到问题或无法找到解决方式,请在微信内回复,我们会尽力解决您的问题。

安装前提(windows环境下)

安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:

如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。

npm install -g hexo-cli

如果您的电脑中尚未安装所需要的程序,请参考以下安装链接指示完成安装。

安装Hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

npm 通常称为node包管理器。顾名思义,它的主要功能就是管理node包,包括:安装、卸载、更新、查看、搜索、发布等。

npm官网

安装命令

npm install -g hexo-cli

如何利用Hexo建站

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

hexo init <folder>
cd <folder>
npm install

<folder>就是你建博客的根目录

然后执行以下代码:

hexo generate   //hexo g也可以,用于生成静态页面
hexo server     //hexo s也可以,用于启动本地服务,预览调试

接下来在浏览器输入http://localhost:4000/即可实现浏览

将博客发布到GitHub上

当然我们写博客肯定不能只在本地运行,一定也是希望让别人可以看见自己的文章的,怎么把文章发不到网上去呢?
这里采用的方法是将博客发布到GitHub Page上

Github是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名为Github

Github Page可以被认为是用户编写的、托管在Github上的静态网页。

注册Github账号

这里我们就不多讲了,小伙伴们可以点击Github官网,进入官网进行注册。

创建仓库

注册好登录账号后,在Github页面的右上方选择New repository进行仓库的创建。

New repository
New repository
仓库的详细地址
仓库的详细地址

在仓库名字输入框中输入:

Github昵称.github.io

千万注意,前面的昵称是你注册GitHub时的昵称,结尾一定是'github.io'

然后点击Create repository即可完成仓库的创建。

Tips:复制此时的仓库地址


复制仓库地址
复制仓库地址

配置GitHub Page

完成仓库创建后,找到仓库的Setting,跳转到GitHub Page部分,Source部分设置如下:


Github Page配置
Github Page配置

配置Hexo,完成博客的上传

至此,GitHub部分的配置就结束了,现在开始进行Hexo部分的配置。

找到博客根目录下的_config.yml文件,下面是该文件的默认配置信息:

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

# Site
title: # The title of your website
subtitle: # The subtitle of your website
description: # The description of your website
author: # Your name
language: # The language of your website
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/child
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:
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: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

看到这里,大家千万别被一长串英文给吓到了,我们实际上要修改的配置只有几项,拿我自己的配置,我们继续往下看:

1 修改网站信息

# Site
title: Blog
subtitle:
description: 从0开始,厚积薄发
author: Yue Yong
language:
timezone:

注意:每一项的填写,其:后面都要保留一个空格,下同。

2 配置统一资源定位符(个人域名)

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

3 配置部署

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

其中repo项是之前Github上创建好的仓库的地址.

branch是项目的分支,我们默认用主分支master。

上传博客

首先将写好的markdown文件放入本地博客文件夹source/_post文件夹下。
然后我们只要在终端执行这样的命令即可:

hexo generate
hexo deploy

这时候我们的博客已经部署到网上了,我们可以在浏览器地址输入栏输入我们的网址即可,如我的博客是:
https://yueyongdev.github.io/

本教程为博客搭建入门教程,大家可以根据自己的需求做进一步改进,如更换主题、删除文章等,详情参考官方文档

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

推荐阅读更多精彩内容