搭建个人博客 步骤详述(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: gitrepository: https://github.com/chenjialin1016/chenjialin1016.github.io.gitbranch: 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: trueline_number: trueauto_detect: truetab_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: truelength: 150#这里用来设置是否显示[阅读全文],将enable改为true(默认是false),设置length的值来决定显示字符的长度,不过Hexo推荐使用<!-- more -->来设置(的确后者更好用,你想显示多少就显示多少),如果使用推荐的方式的话,那么enable得设置为false,以免冲突
next主题官网配置教程
Fullter-shortcutKey
- 新建页面
$ 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-nameTwitter: 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 MappingsGitHub: githubTwitter: twitter微博: weibo
- 每篇文章末尾配置微信公众号二维码
在微信公众号平台下载您的二维码,并将它存放于next主题source/uploads/目录下。
# Wechat Subscriber
wechat_subscriber:enabled: trueqcode: /uploads/wechat-qcode.jpgdescription: 欢迎您扫一扫上面的微信公众号,订阅我的博客!
- 配置打赏功能
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: truewordcount: 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 falseenable: true# custom uv span for the whole sitesite_uv: truesite_uv_header: <i class="fa fa-user"></i> 访问数site_uv_footer: 人# custom pv span for the whole sitesite_pv: truesite_pv_header: <i class="fa fa-eye"></i> 总访问量site_pv_footer: 次# custom pv span for one page onlypage_pv: truepage_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”
最后,附上个人博客地址链接
参考文章
Hexo博客Next主题添加统计文章阅读量功能
Mac上基于Github搭建Hexo博客
Mac+Hexo+GitHub博客搭建教程
hexo+next使用Valine评论系统
为 Hexo 博客主题 NexT 添加 LiveRe 评论支持
Hexo Next主题添加百度统计
搭建个人博客 步骤详述(hexo +github)相关推荐
- 免费个人博客:使用hexo+github搭建详细教程
前言 使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话 ...
- umi脚手架搭建的项目_15天零成本搭建静态博客,托管于Github Page
博客地址 技术栈概览 前台:Umi(路由) + Antd(视图) + TypeScript(增加项目可维护性以及规范性) 后台:Umi(路由) + Antd(视图) + TypeScript(增加项目 ...
- linux hexo搭建个人博客,gitee和hexo搭建个人博客
首先准备软件:git (提供命令git) notepad++(方便编辑) nodejs(hexo依赖) 7z(压缩包) 安装 nodejs.git.notepad++和7z的安装过程省略.主要要说的是 ...
- Linux下使用 github+hexo 搭建个人博客01-hexo搭建
为什么要搭建自己的博客系统? 原因有好几个吧,归类如下: 1.自己搭建博客系统很有成就感,可以自己选定页面风格和页面排版: 2.自己搭建博客系统可以根据自己的需要添加各种插件功能,因此整体上比网上的第 ...
- 使用Hexo 和Github搭建个人博客
文章目录 **背景知识** 搭建环境 安装必要软件 配置 Git SSH key 配置 Hexo 使用 Github Page 仓库 写博客 创建一个新页面 生成静态文件 发布博文到 Github P ...
- Linux下使用 github+hexo 搭建个人博客04-next主题优化
上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功 ...
- 使用hexo yeele主题搭建个人博客
搭建这个博客主要是为了能够将自己的笔记归档,同时也是和自己的GitHub连接起来,现在将自己搭建的博客步骤记录下来. 环境安装 主题(yelee)安装和定制 部分bug修复 环境安装 参考hexo个人 ...
- 使用Hexo搭建个人博客的终极资料
# 一.前言 Hexo 是一个基于 NodeJs 博客框架,可以快速的帮我们搭建一个博客系统,Hexo使用的是Markdown(下文简称MD)解析文章的,在几秒内即可利用靓丽的主体生成静态网页. 推荐 ...
- hexo搭建个人博客_hexo 搭建个人博客
hexo 搭建个人博客 hexo-theme-matery README Hexo BLOG 地址 iyuhp's blog 基本介绍 本 blog 使用 HEXO 搭建, MATERY 作为主题, ...
最新文章
- 使用ASP.NET Atlas开发随输入内容自动调整行数的textarea
- Hibernate学习第一天
- 数据库界的Swagger:一键生成数据库文档!你不了解一下?
- android edittext标签,TagEditText,类似微博标签的文本控件
- 生产过剩下的危机--房价上涨买不起房,房价泡沫破裂后仍然买不起房!
- tomcat jar包_tomcat学习|tomcat中的类加载器
- 51单片机智能小车循迹完整程序_电气与信息工程学院双创协会开展循迹小车培训...
- 颠覆数学思维:直觉也会欺骗你
- Java 设计模式之 Abstract Factory 抽象工厂模式
- html中的空格表示
- C++primer plus第六版课后编程题答案 6.6
- 32bit还是64bit
- td中文字间距_怎么做?文字编排创意的小心思
- Ubuntu 上搭建 TFTP 服务器
- php递归5,5.5.1 PHP递归函数
- 手把手教你清除WIN7的C盘垃圾
- 浩辰CAD给排水2021安装教程
- 920C. Swap Adjacent Elements
- 0xc000007b 解决办法-取出系统盘(机械硬盘或者固态硬盘),删除bootsafe64.sys和衍生文件kavbootc.sys
- 辞旧送吉虎,迎新接玉兔,祝大家新年快乐!