搭建步骤
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
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
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右键,如下图所示:
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 成功的标志