hexo+github搭建个人博客

hexo+github搭建个人博客的过程及注意事项

前几天刚利用hexo+github搭建好了个人博客,那么这第一篇文章就来写写搭建过程,说不定以后用得到,也希望能给想搭建的朋友提供一些帮助,能少踩一点坑

第一步:工具安装

首先是工具的安装,我们先安装GitBash,进入git官网:https://git-scm.com/,直接点击download选择相应版本下载即可;

然后安装node.js,直接进入node官网:https://nodejs.org/en/download/下载即可,安装时一定要勾选全部组件,以及add to path,让它给你自动配置环境变量,这样安装node.js时就已经完成了npm的安装以及环境变量的配置。完成后在cmd和Git Bash下都输入:

1
2
node -v # 会显示node版本号,说明安装成功
npm -v # 会显示npm版本号,说明安装成功

如果它显示command not found,可能就是环境变量配置有问题,记得用户变量也需要配置,把npm的用户变量配上就行

image.png

第二步:GitHub注册

然后进入到github官网:https://github.com/,注册一个自己的账号,邮箱和用户名要选择常用的哈,方便记住,然后在Git Bash上设置一下:

1
2
git config --global user.name "user_name" # user_name填入GitHub用户名
git config --global user.email "user_email" # user_email填入GitHub注册的邮箱

然后我们查看已设置的用户名和邮箱,能看到就说明设置成功:

1
2
git config user.name
git config user.email

image.png

第三步:GitHub创建仓库及配置SSH key

登录github后选择右上角+号,选择new repository,用户名必须为:你的用户名.github.io,这里必须注意,否则后面会出问题,那么将来你的网站首页地址就是:https://你的用户名.github.io了,就像下图这样(我的肯定是已注册)

image.png

打开Git Bash,在里面输入命令

1
ssh-keygen -t rsa -C "user.email" # user.email为GitHub上注册的邮箱

然后直接三个回车即可,默认不需要设置密码,当然你要设也可以,只是要记住,以后部署博客的时候需要用的,我觉得没太大必要,然后去用户主目录看有没有ssh密钥,就在这里面,如下图,将里面id_rsa.pub文件内容全部复制下来,注意看不要多了空格,换行符等等,id_rsa.pub是公钥,可以告诉他人,而id_rsa是私钥就不能泄露了,然后打开github设置密钥界面:https://github.com/settings/keys,点击New SSH key,tiitle为标题可以随便取,然后内容为刚刚复制的id_rsa.pub公钥复制进去即可,最后点击Add SSH key

image.png

image.png

然后我们在Git Bash中验证是否连接成功,输入:

1
ssh -T git@github.com

这里面需要注意的是,第一次输入的时候它会问你yes/no,你得输入yes后再回车,不能直接回车,然后显示出下图这个页面说明连接成功:

image.png

第四步:安装hexo

Hexo 是一个简单、快速、强大的基于 Github Pages 的博客框架,支持 Markdown 格式,有众多优秀插件和主题。

然后我们就安装hexo,在Git Bash中操作哈,别用cmd,网上很多说直接用$ npm install -g hexo-cli直接安装的,我试了试一直不行,也不知道为什么,所以说我就先安装cnpm,这里我用的是淘宝的镜像源,如果错误就重来,因为连接可能不稳定,失败了多试几次就可以了:

1
2
3
4
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v #如果显示cnpm的版本信息就说明安装成功
cnpm install -g hexo-cli #安装 hexo(如果失败重新来过)
hexo -v #返回 hexo 的版本信息

如果这里显示出了hexo的版本信息,就说明安装成功了,然后我们在电脑中随便找一个地方,建立一个空文件夹,以后你博客的所有东西就都在这里面操作,进入这个空文件夹,右键,点击Git Bash Here,打开Git Bash终端,然后输入:

1
2
3
hexo init     #初始化 hexo
ls -l #查看初始化获得的文件
hexo s #启动 hexo,本地预览

然后这里如果都没问题的话,就可以在本地4000端口查看自己的网站了,就是这个网站:http://localhost:4000

第五步:将博客部署到GitHub上

然后我们就需要将我们本地的博客搭到GitHub上去了,首先需要修改配置文件,打开博客文件夹中的配置文件_config.yml,需要进行修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
这里贴一份网上看到的  可以复制替换原来的  但是替换之前最好备份 可能会出错
那要么你就对照着看一下改就好:
# Hexo Configuration
## Docs: http://zespia.tw/hexo/docs/configure.html
## Source: https://github.com/tommy351/hexo/

# Site
title: My Blog #博客名
subtitle: to be continued... #副标题
description: My blog #给搜索引擎看的,对网站的描述,可以自定义
author: Yourname #作者,在博客底部可以看到
email: yourname@yourmail.com #你的联系邮箱
language: zh-CN #中文。如果不填则默认英文

# URL #这项暂不配置,绑定域名后,欲创建sitemap.xml需要配置该项
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories

# Writing 文章布局、写作格式的定义,不修改
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
max_open_file: 100
filename_case: 0
highlight:
enable: true
backtick_code_block: true
line_number: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives 默认值为2,这里都修改为1,相应页面就只会列出标题,而非全文
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 1
category: 1
tag: 1

# Server 不修改
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
logger: false
logger_format:

# 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-M-D
time_format: H:mm:ss

# Pagination 每页显示文章数,可以自定义,贴主设置的是10
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Disqus Disqus插件,我们会替换成“多说”,不修改
disqus_shortname:

# Extensions 这里配置站点所用主题和插件,暂时默认
## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
## Themes: https://github.com/tommy351/hexo/wiki/Themes
theme: landscape
exclude_generator:
plugins:
- hexo-generator-feed
- hexo-generator-sitemap

# Deployment 站点部署到github要配置(重点!!!)
## Docs: http://zespia.tw/hexo/docs/deploy.html
deploy:
type: git
repository: //这里是需要填的,下面会讲
branch: master

然后我们打开Github个人主页的Repository,进入到自己的博客项目,复制项目的SSH码,这里一定要看清楚是复制SSH码哈,git@github.com开头的,然后粘贴到配置文件最后的repository中,粘贴好后CTRL+S保存即可:

image.png

然后依次执行命令:

1
2
3
4
hexo clean // 清除存缓(不用每次执行)
hexo g // 修改生成
hexo s // 修改预览(不用每次执行)
hexo d // 修改部署

最后一步hexo d是最重要的,但这里可能会出现ERROR Deployer not found: git报错,这是因为我们没有安装hexo-deployer-git这个插件,但因为安装这个插件需要新建文件夹,而在有的目录下新建文件夹需要管理员权限,这里就需要就在开始菜单输入cmd,并且以管理员身份运行就可,如下图:

image.png

然后执行cnpm install hexo-deployer-git --save安装这个插件,这里还有一个坑,就是必须要在站点目录下执行这句安装hexo-deployer-git的命令,所谓站点目录就是执行hexo init的目录,也就是建立博客的主文件夹,要在里面执行命令才行,如果已经在其他目录安装了hexo-deployer-git插件的小伙伴,可以使用以下命令卸载该插件:cnpm uninstall hexo-deployer-git --save,由于我们是打开的是cmd,所以说要先用cd命令转到站点目录下,然后执行命令安装hexo-deployer-git插件就行啦,然后hexo d就不会报错啦,等一两分钟去看自己博客主页就有东西啦!我们的博客就搭好啦!快往里面放东西吧!

  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2021-2022 Arsene.Tang
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~

支付宝
微信