hexo + github 搭建个人博客

hexo github 搭建个人博客安装node.js 和 git安装Node.js最简单的方式就是下载安装程序来安装。使用Homebrew MacPorts或下载安装程序安装 如果你的电脑上装了Xcode的话 则无需安装 Xcode自带Git。检查是否安装成功

$ node -v

v12.16.1

$ npm -v

6.13.4

$ Git --version

git version 2.24.1 (Apple Git-126)

安装hexo

安装时需要注意权限问题 加上sudo 其中-g表示全局安装

sudo npm install -g hexo

博客初始化创建好存储博客的文件夹 比如命名为GithubBlog 然后命令进入文件夹

cd GithubBlog

执行命令初始化本地博客 下载一系列文件

hexo init

执行以下命令安装npm

sudo npm install

执行以下命令生成本地网页文件 并开启服务器 然后可以通过http://localhost:4000/查看本地博客

当localhost:4000 打不开时 尝试使用http://127.0.0.1:4000/

hexo g

hexo s

本地博客关联 github首先在github新建仓库 命名为 user.github.io 例如 chenjialin1016.github.io
cd 到 GithubBlog文件夹下 打开_config.yml文件 可以使用终端 也可以使用sublime

vim _config.yml

打开后滑动到文档末尾 配置deploy

deploy:

 type: git

 repository: https://github.com/chenjialin1016/chenjialin1016.github.io.git

 branch: master

注意

1、其中将repository中的chenjialin1016改为自己的username

2、type、repository、branch后均有空格

通过以下命令在GithubBlog文件夹下生成静态文件 并上传指服务器

hexo g

hexo d

注意

1、若执行 hexo g出错 执行npm install hexo --save

2、若执行hexo d出错 执行npm install hexo-deployer-git --save

3、错误修正后 需要再次执行以上两个命令

4、若未关联Github 执行hexo d时会提示输入github的用户名和密码

username for https://github.com :此处输入用户名

password for https://github.com :此处输入密码

hexo d执行成功后 可通过https://chenjialin1016.github.io/访问博客 看到的内容与http://localhost:4000/一致

添加ssh keys 到 Github

添加ssh keys后 更新博客不需要再输入用户名密码

首先检查本地是否包含ssh keys。如果存在则直接将ssh key添加到GitHub之中 否则新生成ssh key。执行以下命令生成ssh key 将其中的your_email example.com改成自己注册的gihub的邮箱地址 默认会在~/.ssh/id_rsa.pub中生成id_rsa和id_rsa.pub文件

ssh-keygen -t rsa -C your_email example.com 

利用终端打开文件夹 并打开id_rsa.pub文件 将里面的信息拷贝

open ~/.ssh

来到github官网 打开路径为github- Setting- SSH and GPG keys 选中SSH and GPG keys 点击New SSH keys 粘贴之前拷贝的id_rsa.pub里面的信息

到此 本地博客已经关联至github 本地博客改变之后 通过hexo g和hexo d便可更新到GitHub之中

更换 hexo主题cd到GithubBlog文件夹 执行以下命令

git clone https://github.com/iissnan/hexo-theme-next themes/next

将GithubBlog目录下的_config.yml中的theme改为next重新执行以下命令

hexo g //生成缓存和静态文件

hexo d //重新部署到服务器

当部署完成后 网页无变化时 执行以下命令

hexo clean //清楚缓存文件(db.json)和已生成的静态文件(public)

配置 Hexo-theme-next主题

路径 GithubBlog- themes- next

打开_config.yml文件

# Site

title: Rudy s Blog # 站点标题

subtitle: # 站点副标题

description: 记录走过的痕迹 # 站点描述

author: Rudy # 你的名字

language: zh-Hans # 站点语言 (之前版本为zh-CN)

timezone: # 站点时区

avatar: # 头像 (之前版本可以在此设置头像 现在需要去主题配置文件设置)

配置next主题 个人选择Pisces

# Schemes

# scheme: Muse

#scheme: Mist

scheme: Pisces

#scheme: Gemini

#schemes用来设置你使用NexT的样式主题 以前只有3项 现在增加了Gemini项。Pisces样式文章布局比以前有所加宽。

如果要使代码高亮 需要将auto_detect改为true 还可以选择高亮主题 修改主题目录下的_config.yml会提到

highlight:

 enable: true

 line_number: true

 auto_detect: true

 tab_replace:

配置网页中的菜单

menu:

 menu:

 home: / || home #首页

 about: /about/ || user #关于

 tags: /tags/ || tags #标签

 categories: /categories/ || th #分类

 archives: /archives/ || archive #归档

 #schedule: /schedule/ || calendar #日程表

 #sitemap: /sitemap.xml || sitemap #站点地图

 #commonweal: /404/ || heartbeat #公益404

#menu用来设置菜单 我这个地方设置了5个菜单选项 分别是首页、标签、关于、分类和归档 不让显示

的菜单选项可以用#注释掉 || 后面是设置图标 图标来自于https://fontawesome.com/icons?d gallery

且需要执行以下命令创建menu下的子网页 以tags为例

路径 GithubBlog- sources- tags 修改文件夹中index.md中的type为tags 再次执行hexo g和hexo d将界面重新上传至服务器。

catagories 、archive、about对应的子界面同理创建

hexo new page tags 

配置highlight_theme 用来设置代码高亮的主题(默认是normal)

# Code Highlight theme

# Available values: normal | night | night eighties | night blue | night bright

# https://github.com/chriskempson/tomorrow-theme

highlight_theme: night eighties

这里用来设置是否显示[阅读全文] 将enable改为true(默认是false) 设置length的值来决定显示字符的长度 不过Hexo推荐使用来设置(的确后者更好用 你想显示多少就显示多少) 如果使用推荐的方式的话 那么enable得设置为false 以免冲突

# Automatically Excerpt. Not recommend.

# Please use !-- more -- in the post to control excerpt accurately.

auto_excerpt:

 enable: true

 length: 150

#这里用来设置是否显示[阅读全文] 将enable改为true(默认是false) 设置length的值来决定显示字符的长度 不过Hexo推荐使用 !-- more -- 来设置(的确后者更好用 你想显示多少就显示多少) 如果使用推荐的方式的话 那么enable得设置为false 以免冲突

新建页面

$ hexo new page tags

新建文章

$ hexo new FirstArticle 

编辑完成后 依次执行以下命令

hexo clean // 清除缓存文件 (db.json) 和已生成的静态文件 (public)

hexo g // 生成静态文件

hexo d // 部署网点

如果你想在本地服务器上看一下效果 可以执行 hexo s // 启动本地服务器,打开网址http://localhost:4000 你就可以看到你写的文章了

Hexo命令不能执行 返回Usage: hexo

Hexo命令不能执行 返回Usage: hexo

原因 没有进入blog文件路径下

next设置动画背景
搜索 canvas_nest 或 three_waves 根据您的需求设置值为 true 或者 false 即可

# canvas_nest

canvas_nest: true //开启动画

canvas_nest: false //关闭动画

# three_waves

three_waves: true //开启动画

three_waves: false //关闭动画

three_waves 在版本 5.1.1 中引入。只能同时开启一种背景动画效果。

配置侧边栏社交链接

social:

 GitHub: https://github.com/your-user-name

 Twitter: https://twitter.com/your-user-name

 微博: http://weibo.com/your-user-name

 豆瓣: http://douban.com/people/your-user-name

 知乎: http://www.zhihu.com/people/your-user-name

图标

social_icons:

 enable: true

 # Icon Mappings

 GitHub: github

 Twitter: twitter

 微博: weibo

每篇文章末尾配置微信公众号二维码
在微信公众号平台下载您的二维码 并将它存放于next主题source/uploads/目录下。

# Wechat Subscriber

wechat_subscriber:

 enabled: true

 qcode: /uploads/wechat-qcode.jpg

 description: 欢迎您扫一扫上面的微信公众号 订阅我的博客 

配置打赏功能

reward_comment: 坚持原创技术分享 您的支持将鼓励我继续创作 

wechatpay: /path/to/wechat-reward-image

alipay: /path/to/alipay-reward-image

来必力 安装代码

来必力官网

 !-- 来必力City版安装代码 -- 

 div id lv-container data-id city data-uid MTAyMC81MDQ3MC8yNjk1Nw 

 script type text/javascript 

 (function(d, s) {

 var j, e d.getElementsByTagName(s)[0];

 if (typeof LivereTower function ) { return; }

 j d.createElement(s);

 j.src https://cdn-city.livere.com/js/embed.dist.js 

 j.async true;

 e.parentNode.insertBefore(j, e);

 })(document, script 

 /script 

 noscript 为正常使用来必力评论功能请激活JavaScript /noscript 

 /div 

 !-- City版安装代码已完成 -- 

google 验证设置sitemap

sitemap:

 path: sitemap.xml

在谷歌站点地图中创建资源类型

D](media/15919323394888/4592859C-473E-4E96-A9D4-7D102CAB44DD.png)选择验证方式---html标签

 meta name google-site-verification content GthFrJ1ky-fYHVFt1Z7Siye3kLyqYKFgt3thV4UElM4 / 

next的主题配置中配置google验证的html 码 需要执行hexo g、hexo d重新提交

google_site_verification: GthFrJ1ky-fYHVFt1Z7Siye3kLyqYKFgt3thV4UElM4

配置站点地图

百度 验证

 meta name baidu-site-verification content OM2eQqaHyF / 

百度配置robots添加蜘蛛协议 robots
新建robots.txt文件 添加以下文件内容 把robots.txt放在hexo站点的source文件下。

# hexo robots.txt

User-agent: * Allow: /

Allow: /archives/

Disallow: /vendors/

Disallow: /js/

Disallow: /css/

Disallow: /fonts/

Disallow: /vendors/

Disallow: /fancybox/

Sitemap: https://chenjialin1016.github.io/sitemap.xml

Sitemap: https://chenjialin1016.github.io/baidusitemap.xml

执行命令hexo g、hexo d重新部署检测并更新

github配置自定义域名先进入桌面, cd 你的hexo本地目录, cd source, touch CNAME创建CNAME文件, open CNAME打开并编辑.填入域名, 不用加任何http://或者www, 填写完成后保存退出.输入../回到你的hexo本地目录. hexo g -d重新生成部署.然后访问域名, 比如我的, swift520.com, 成功!~

添加文章字数统计、阅读时长 next主题已经集成

Hexo 提供了 hexo-wordcount 插件 新版本的 next 中集成了这一点 只需要安装插件然后开启功能就 ok。

第一步 安装 word_count 插件 在博客根目录下打开终端 npm install hexo-wordcount --save

第二步 在主题配置文件 Blog\themes\next\config.yml 中打开 post_wordcount 统计功能

# Post wordcount display settings

# Dependencies: https://github.com/willin/hexo-wordcount

post_wordcount:

 item_text: true

 wordcount: true # 单篇 字数统计

 min2read: true # 单篇 阅读时长

 totalcount: false # 网站 字数统计

 separated_meta: true

菜单图标 显示问题

已查到问题 是因为使用

cnpm install

而不是使用

npm install

方案 执行npm install

不蒜子统计hexo-next配置文件中修改 busuanzi_count 将enbale改为 true

busuanzi_count:

 # count values only if the other configs are false

 enable: true

 # custom uv span for the whole site

 site_uv: true

 site_uv_header: i class fa fa-user /i 访问数

 site_uv_footer: 人

 # custom pv span for the whole site

 site_pv: true

 site_pv_header: i class fa fa-eye /i 总访问量

 site_pv_footer: 次

 # custom pv span for one page only

 page_pv: true

 page_pv_header: i class fa fa-eye /i 浏览

 page_pv_footer: 次

同样 在配置文件中将footer增加counter参数

footer:

 counter: true

在 next主题的layout- _partials- footer.swig中增加以下代码

{% if theme.footer.counter %}

 script async src //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js /script 

 span id busuanzi_container_site_pv 本站总访问量 span id busuanzi_value_site_pv /span 次 /span 

 span class post-meta-divider | /span 

 span id busuanzi_container_site_uv 本站访客数 span id busuanzi_value_site_uv /span 人 /span 

{% endif %}

Bug 不蒜子统计失效

原因 不蒜子网址发生了变化

修正 将theme- next- _third-party- analytics中的busuanzi-counter.swig中的.js改为图中的地址

不蒜子官网

将

src “https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js”

src “https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js”

最后 附上个人博客地址链接

Git之使用GitHub搭建远程仓库 我们需要一个作为服务器的远程仓库！当然搭建一个服务器是需要成本的，为什么不把项目托管到Github上呢？作为开源代码库以及版本控制系统，Github拥有140多万开发者用户。随着越来越多的应用程序转移到了云上，Github已经成为了管理软件开发以及发现已有代码的首选方法，不需要任何成本，为何不使用呢？本节就来学习如何把我们的代码托管到Github上！