使用Hexo+Github搭建属于自己的博客
工具:Visual Studio Code/MarkdownPad
技术:Hexo+Github
创建Github项目
- Github账户注册和新建项目,项目必须要遵守格式:账户名.github.io,不然接下来会有很多麻烦。并且需要勾选Initialize this repository with a README
- 在建好的项目右侧有个settings按钮,点击它,向下拉到GitHub Pages,你会看到那边有个网址,访问它,你将会惊奇的发现该项目已经被部署到网络上,能够通过外网来访问它。
安装Hexo
- 在自己认为合适的地方创个文件夹,我是在D盘建了一个blog文件夹。然后在vscode打文件夹
- 在vscode中打开终端,输入npm install hexo -g,开始安装Hexo
- 输入hexo -v,检查hexo是否安装成功
- 输入hexo init,初始化该文件夹(有点漫长的等待。。。)看到后面的“Start blogging with Hexo!”,激动有木有!!!!!
- 输入npm install,安装所需要的组件
- 输入hexo g,首次体验Hexo
- 输入hexo s,开启服务器,访问该网址,正式体验Hexo(假如页面一直无法跳转,那么可能端口被占用了。此时我们ctrl+c停止服务器,接着输入“hexo server -p 端口号”来改变端口号)
将本地blog和Github项目联系起来
- 配置Deployment,在其文件夹中,找到_config.yml文件,修改repository值(在末尾)
- repository值是你在github项目里的ssh(右下角)
deploy:
type: git
repository: git@github.com:ZengGuanBao/ZengGuanBao.github.io.git
branch: master
- 新建一篇博客,在cmd执行命令:hexo new post "博客名"
或者在vscode中新建文件
![](https://img2018.cnblogs.com/blog/1504257/201811/1504257-20181103182956843-1605468178.png)
把新建的文章更新到Github项目上
- 在生成以及部署文章之前,需要安装一个扩展:
npm install hexo-deployer-git --save
- 使用编辑器编好文章,那么就可以使用命令:hexo d -g,生成以及部署了
- 部署成功后访问你的地址:http://用户名.github.io。那么将看到生成的文章
更新主题后,上传没有生效
最后,在查询了一些资料之后,终于知道,这可能是hexo的缓存的问题,也就是你网站根目录的那个db.json文件,还知道了一点,推荐在发布网站之前,先清除缓存,然后再部署网站。
清除缓存的方法:
- 执行命令:hexo clean
- 然后可以生成静态博客并在本地预览:hexo d -g
搜索功能
使用站内搜索,安装npm i -S hexo-generator-json-content
分享功能
百度分享不支持Https的解决方案
将static文件夹放在网站的根目录下,并将对应的百度分享代码中,把http://bdimg.share.baidu.com/ 改为 /static/api/js/share.js?v=89860593.js?
<p><i class="fa fa-share"></i>分享到</p>
<div class="bdsharebuttonbox">
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
<a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
<a href="#" class="bds_linkedin" data-cmd="linkedin" title="分享到linkedin"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_evernotecn" data-cmd="evernotecn" title="分享到印象笔记"></a>
</div>
<script>
window._bd_share_config = {
"common": {
"bdSnsKey": {},
"bdText": "",
"bdMini": "2",
"bdMiniList": false,
"bdPic": "",
"bdStyle": "1",
"bdSize": "24"
},
"share": {},
"image": {
"viewList": ["fbook", "twi", "linkedin", "qzone", "tsina", "douban", "weixin", "evernotecn"],
"viewText": "分享到:",
"viewSize": "16"
}
};
with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src =
'/static/api/js/share.js?v=89860593.js?'];
</script>
评论功能
评论功能使用的Valine
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>
<script>
new Valine({
el: '#valine-thread' ,
notify: ,
verify: ,
app_id: '',
app_key: '',
placeholder: '',
pageSize: '',
avatar: '',
avatar_cdn: '',
visitor:
});
</script>
<div id="valine-thread"></div>
原文地址:https://segmentfault.com/a/1190000016789673
使用Hexo+Github搭建属于自己的博客的更多相关文章
- 使用Hexo+Github搭建属于自己的博客(进阶)
主题的配置:这里以NexT主题作为题材 1.安装NexT,在其文件夹中鼠标右键,点击Git Base Here.输入命令:git clone https://github.com/iissnan/he ...
- 使用Hexo+Github搭建属于自己的博客(基础)
前言 hexo是一个台湾人做的基于Node.js的静态博客程序,优势是生成静态文件的速度非常快,支持markdown, 我最终选定它的原因是它速度快而且不容易出错,并且可以一键部署到github或者其 ...
- 使用Hexo & Github,搭建属于自己的博客
经过在网上各种找资料,踩过各种坑,终于搭建好了hexo,直接与gitbub一起使用,搭建起自己的免费的博客. 关于Hexo Hexo是一款基于Node.js的静态博客框架. Hexo特性 风一般的速度 ...
- HEXO+Github,搭建属于自己的博客
摘录自:http://www.jianshu.com/p/465830080ea9 1. github的准备 账号 密码 建立Repository建立与你用户名对应的仓库,仓库名必须为[your_us ...
- Hexo+Github 搭建属于自己的博客(Mac下安装 其他操作系统大同小异)
安装前提 参考博客:http://blog.csdn.net/gdutxiaoxu/article/details/53576018#t5(写的很好,不用看我的了.....) 这篇:http://ww ...
- 手把手教你使用Hexo+GitHub搭建自己的个人博客网站
安装nodejs环境 这个直接搜索安装即可,安装完成之后,通过如下命令检测环境变量是否安装成功: λ node -v # 输出版本号 v12.13.1 正确输入版本号即可. 安装cnpm cnpm是淘 ...
- 使用Github+Hexo框架搭建部署自己的博客
前言 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown (或其他渲染引擎 )解析文章, 在几秒内,即可利用靓丽的主题生成静态网页. 安装 安装前提 安装 Hexo 相当简单 ...
- github+hexo+themes搭建简易个性主题博客
0x00 install Node.js and git 安装Node.js:http://www.runoob.com/nodejs/nodejs-install-setup.html 安装git ...
- hexo + Github Page 0元建立博客攻略
传送门: 5分钟 0元搭建个人独立博客网站(一):https://mp.weixin.qq.com/s/69isJE191WV2gaVbjrwTtw 5分钟 0元搭建个人独立博客网站(二):https ...
随机推荐
- JSP && Servlet | 上传文件
在WebContent下新建index.jsp 要点: 1. 表单 method 属性应该设置为 POST 方法,不能使用 GET 方法. 2. 表单 enctype 属性应该设置为 multip ...
- 牛客寒假6-B.煤气灶
链接:https://ac.nowcoder.com/acm/contest/332/B 题意: 小j开始打工,准备赚钱买煤气灶. 第一天,小j的工资为n元,之后每天他的工资都比前一天多d元. 已知煤 ...
- Codeforces 1143B(思维、技巧)
自己水平太低,不丢人. 结论是最后选取的数后缀一定是若干个9,暴举即可.然而暴举也有暴举的艺术. ll n; ll dfs(ll n) { if (n == 0) return 1; if (n &l ...
- Zip-line Codeforces - 650D || 风筝
https://codeforces.com/contest/650/problem/D 原题? http://210.33.19.103/contest/1024/problem/2 4s 520M ...
- 洛谷 P1042 乒乓球
P1042 乒乓球 var s:string; a1:array[1..50000] of char; i,n,x,y:longint; procedure f1; begin while not e ...
- linux系统任务调度命令crontab
循环重复的执行计划任务.有计划性的执行任务,像这种任务,在linux系统中就有cron命令来完成. linux系统下的任务调度分为两类:系统任务调度和用户任务调度. /etc/crontab文件就是系 ...
- 实现一个redis连接池
#*****************jedis连接参数设置*********************#redis服务器ipredis.ip=169.254.130.122#redis服务器端口号red ...
- Ubuntu 解决E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)
今天想在ubuntu上配置nodejs的环境.结果用apt install安装软件时出现报错. $ sudo apt-get update 会得到下面错误提示: E: 无法获得锁 /var/lib/a ...
- React 实践记录 04 Flux demo
Introduction flux应用架构如下图所示,本文并不是讲述怎么立即做一个酷炫的应用,而是讲述如何依照这种框架,来进行代码的组织. 我们先把这个流程转述为文字:抛开与webAPI的交互不谈,以 ...
- Does Little'law really applicable to apply performance model now?
上次提到Little定律, 我也解释过它跟另外一个公式有一些内在的关系,但是其实我自己对LL在当前复杂架构系统中到底是怎么应用的也没有完整的想法,于是我在Linkedin上把这个问题抛了出来,没有想到 ...