Fork me on GitHub

使用hexo搭建github博客

首先是NodeJS的安装

1. 下载

下载地址(目前版本V8.1.1,具体版本以访问时版本为主):NodeJS中文网

1.1. msi的安装包

node-v8.1.1-x64.msi,安装过程中有对环境变量的设置选项。

1.2. zip解压缩包

node-v8.1.1-x64.zip,没有配置环境变量的过程,需要手动配置。

2. 安装

2.1. msi安装

安装步骤1:

安装步骤1

安装步骤2:

安装步骤2

安装步骤3:

安装步骤3

安装步骤4:

安装步骤4

安装步骤5:

安装步骤5

2.2. zip解压缩安装

这个比较简单。解压缩得到node-v8.1.2-x64文件夹,重命名为nodejs放置在C:,即C:\nodejs。

目录结构如下:

zip安装步骤1)

注意:配置环境变量

Win10:此电脑(计算机)->鼠标右键属性->高级系统设置->环境变量->系统变量->Path,编辑,添加C:\nodejs。如图:

zip安装步骤2)

2.3 验证是否安装成功

打开命令行工具(CMD)(win+x->shift+c):

C:\Users\你的用户名>node -v
v8.1.1
C:\Users\你的用户名>npm -v
v5.0.3

验证安装npm

出现上述Node.js以及npm的版本信息,基本就属于成功安装。

Node.js的安装到此结束。

Hexo+GitHub配置个人Blog:

安装Hexo(命令行):

C:\Users\你的用户名>npm install(i) hexo -g

注意:其中install(i)表示二选一,i为install的缩写。

C:\Users\你的用户名>E:

切换目录至E盘,准备新建本地blog

E:\>hexo init blog

Hexo初始化Blog)

切换目录进入blog

E:\>cd blog

启动本地服务器,查看blog

E:\blog>hexo server(s)

注意:其中server(s)表示二选一,s为server的缩写。

Hexo启动服务器

打开浏览器访问http://localhost:4000/即可看到一个比较简洁的个人Blog。

此时的Blog目录结构:

Blog目录结构

_config.yml文件内容说明:

Hexo Configuration Hexo配置文件
Docs: https://hexo.io/docs/configuration.html
Source: https://GitHub.com/hexojs/hexo/
#标题
title:
#副标题
subtitle:
#网站描述
description:
#作者昵称
author:
#网站语言,默认英语
language: zh-Hans
#时区,默认电脑时区
timezone:

# 网址设置
#如果网站是放在子目录中,将url设置成'http://yoursite.com/child',将root设置成'/child/'
#网址
url:
#网站根目录。如果网站是放在子目录中,将root设置成'子目录名'
root: /
#文章链接地址格式 。即文章存放的目录。
permalink: :year/:month/:day/:title/
permalink_defaults:

# 目录设置
#资源文件夹,放在里面的文件会上传到GitHub中
source_dir: source
#公共文件夹,存放生成的静态文件
public_dir: public
#标签文件夹,默认是tags。实际存放在source/tags中。
tag_dir: tags
rss_dir: rss
#档案文件夹,默认是archives。
archive_dir: archives
#分类文件夹,默认是categories。实际存放在source/categories中。
category_dir: categories
#代码文件夹,默认是downloads/code
code_dir: downloads/code
#国际化文件夹,默认跟language相同
i18n_dir: :lang
#不需要渲染的文件夹或文件夹,放在[]中
# 这两个文件是百度和google的站长验证文件,不能渲染,否则会改变内容,不能验证过
skip_render:


# 写作选项
# 新建博文(帖子)的默认名称
# File name of new posts
new_post_name: :title.md
#默认布局模板是post,而不是draft和page
default_layout: post
#是否将标题转换成标题形式(首字母大写)
titlecase: false # Transform title into titlecase
#在新标签页面中打开网页
external_link: true # Open external links in new tab
filename_case: 0
#是否渲染草稿
render_drafts: false
#启动 Asset 文件夹
post_asset_folder: false
#把链接改为与根目录的相对位址
relative_link: false
#显示未来的文章
future: true
#代码块的设置
    highlight:
    enable: true        #  使用代码高亮
    line_number: true   # 显示行号
    auto_detect: true   # 自动检测语言
    tab_replace:

# 分类和标签
# 默认分类
default_category: uncategorized
#分类别名
category_map:
#标签别名
tag_map:

# 日期和时间格式
#Hexo 使用 Moment.js 来解析和显示时间。
## 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

# 分页配置
## 设置per_page为0关闭分页功能
#每页显示的文章量
per_page: 20
pagination_dir: page

# Extensions
## 主题配置
## Themes: https://hexo.io/themes/
#theme: false #禁用主题
theme: landscape

# 部署配置
## Docs: https://hexo.io/docs/deployment.html
deploy:
    type: git
    repo: https://GitHub.com/minipuppy/minipuppy.GitHub.io.git
    branch: master

注意:上述文件中,配置选项与内容间均有一个空格如:

theme: landscape

其中

deploy:
    type: git
    repo: https://GitHub.com/minipuppy/minipuppy.GitHub.io.git
    branch: master

为配置与GitHub的关联。

配置GitHub仓库

登陆GitHub账户(别说木有啊💔): New repository

Repository name:yourname.GitHub.io

Description (optional):自己博客的简单描述

勾选public

勾选Initialize this repository with a README

下载Git:https://git-scm.com/downloads

安装Git:这一步不在重复,与Node.js相同,两种方法。exe安装或者zip便携安装(手动配置环境变量:git\bin;git\usr\bin;前者必须配置,后面这个是为了使用linux的一些命令,可以不添加)

配置SSH

  1. 打开Git Bash终端

  2. 设置username 和email

    $git config –global user.name “你的GitHub用户名”

    $git config –global user.email “你的GitHub注册邮箱

  3. 生成ssh密钥:

    $ssh-keygen -t rsa -C “你的GitHub注册邮箱”

生成过程中直接一路回车就行,最后会在C\Users\你的用户名\生成一个目录.ssh。其中有刚生成的id_rsa(私钥)与id_rsa.pub(公钥,可以用记事本打开)。

  1. 添加公钥至GitHub;

登陆GitHub网页->点击用户头像,Settings(设置)->用户栏点击SSH and GPG keys选项->New SSH key->Title:你自己的描述,Key:公钥文件中的文本复制->Add SSH key,结束。

hexo的_config.yml文件已经配置了与GitHub的关联。
还要安装git插件

E:\blog>npm i hexo-deployer-git --save

向GitHub部署Hexo:E:\blog>Hexo d。因为第一次部署,会有跟GitHub有关的登陆验证,正常进行即可,之后的部署不再出现。

此时可以访问yourname.github.io即可看到刚部署的页面,比较简单,有一篇事先生成好的Hello world页面。到此结束

参考:

手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置