搭建步骤

1.GitHub 创建个人仓库
2.安装Git
3.安装Node.js
4.安装Hexo
5.美化
6.部署

1 GitHub 创建个人仓库

1.1 创建仓库(用户名.github.io)

1 登录GitHub,如果没有的话请先注册。

2 登录之后点击GitHub 中的 New repository创建新的仓库.

3 仓库名应为:用户名.github.io 比如:

仓库名

2 安装Git

2.1 安装Git

1 安装Git

2 下载安装成功后进行将自己的Github账号与Git进行绑定.

2.2 配置

1 打开Git,并配置。输入以下命令:

git config --global user.name "自己注册GitHub的用户名"  
git config --global user.email "注册GitHub时所用的邮箱"

2.3 ssh

1 设置user.name和user.email配置信息之后进行生成ssh密匙文件

ssh-keygen -t rsa -C "####@####.com"

2 然后找到该命令生成的id_rsa.pub密匙。路径为 C:\Users\Admin\.ssh

id_rsa.pub

3 打开该文件,推荐使用 Visual Studio Code 打开

2.4 GitHub 添加密匙

1 复制文件中的所有内容,然后进入 GitHub_Settings_Deploy keys 界面,点击右边的Add deploy key 如图所示:

添加密匙

2 新建 new SSH Key

注: title可自定义内容,Key为之前复制的密匙

2.5 检测

1 以上步骤完成后, 检测GitHub公匙是否成功,输入下面的命令:

ssh git@github.com
ssh连接成功
ssh连接成功

3 安装Node.js

3.1 安装Node.js

1 下载并安装Node.js,根据自己的喜好下载不同的版本

3.2 检测是否安装成功

1 检测Node.js是否安装成功

node -v

2 检测nopm是否安装成功

npm -v

4 安装Hexo

4.1 创建

1 创建一个文件夹,创建完成之后选择该文件夹并按住shift右键,如下图所示:

begin

4.2 添加Hexo

1 依次输入,参考Hexo官方文档

npm install hexo-cli -g
hexo init
npm install
hexo server

4.3 预览

1 在浏览器输入localhost:4000

2 若出现错误,参考以下:

使用localhost:4000访问本地blog一直无响应
使用localhost:4000访问本地blog一直无响应
使用localhost:4000访问本地blog一直无响应

5 美化

5.1 挑选主题

1 Hexo官网提供的主题

2 我使用的是yilia,我的博客

5.2 下载主题

1 在根目录打开Git,输入

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

5.3 更新主题

cd thems/yilia
git pull

5.4 配置主题

1 根目录打开_config.yml配置文件

2 将 themes:##### 改为 theme: yilia

5.5 个性化主题

1 打开 themes 下的 yilia 文件夹中的 _config.yml

2 配置主题(添加头像,图标及其他)

# Header

menu:
  主页: /
  相册: /photos

# SubNav
subnav:
  #github: "#"
  #weibo: "#"
  #rss: "#"
  #zhihu: "#"
  #qq: "#"
  #weixin: "#"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  #mail: "#"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

#rss: /atom.xml
url: #
# 是否需要修改 root 路径
# 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: /

# Content

# 文章太长,截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接,不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false

# 打赏
# 打赏type设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 0
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/assets/img/alipay.jpg
alipay: 
# 微信二维码图片地址
weixin: 

# 目录
# 目录设定:0-不显示目录; 1-文章对应的md文件里有toc:true属性,才有目录; 2-所有文章均显示目录
toc: 1
# 根据自己的习惯来设置,如果你的目录标题习惯有标号,置为true即可隐藏hexo重复的序号;否则置为false
toc_hide_index: true
# 目录为空时的提示
toc_empty_wording: '目录,不存在的…'

# 是否有快速回到顶部的按钮
top: true

# Miscellaneous
baidu_analytics: ''
google_analytics: ''
#路径为E:\Blog\source
favicon: /assets/img/head.png

#你的头像url   路径为E:\Blog\source
avatar: /assets/img/face.jpg

#是否开启分享
share_jia: true

#评论:1、多说;2、网易云跟帖;3、畅言;4、Disqus;5、Gitment
#不需要使用某项,直接设置值为false,或注释掉
#具体请参考wiki:https://github.com/litten/hexo-theme-yilia/wiki/

#1、多说
duoshuo: false

#2、网易云跟帖
wangyiyun: false

#3、畅言
changyan_appid: false
changyan_conf: false

#4、Disqus 在hexo根目录的config里也有disqus_shortname字段,优先使用yilia的
disqus: false

#5、Gitment
gitment_owner: false      #你的 GitHub ID
gitment_repo: ''          #存储评论的 repo
gitment_oauth:
  client_id: ''           #client ID
  client_secret: ''       #client secret

# 样式定制 - 一般不需要修改,除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  header: '#4d4d4d'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的设置
slider:
  # 是否默认展开tags板块
  showTags: false

# 智能菜单
# 如不需要,将该对应项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '所有文章'
  friends: '友链'
  aboutme: '关于我'

friends:
  友情链接: #


aboutme: #

注:可以根据这个自己修改,记得保存

6 部署

6.1 安装Git插件

1 为Hexo安装Git插件

npm install hexo-deployer-git --save

2 修改根目录下的 _config.yml 配置文件。

deploy:
  type: git
  repository: https://github.com/yanxin152133/yanxin152133.github.io.git
  branch: master

6.2 部署

1 打开Git,输入:

hexo d

2 成功的标志

success