Hexo+Next搭建Github个人静态博客
2016-01-28 18:29
507 查看
经过我几天的努力,用hexo搭建的博客终于好了。欢迎莅临
废话不多说。
安装Git(必须) 一路默认安装即可。
Github账号(必须)
后在浏览器中输入 http://localhost:4000/
此时,会有一篇文章hello world,对应的文件为 E:\Hexo\source_posts\hello-world.md
文章用markdown语法写.
会新建一个名为’New article’的文章,执行以下命令之后查看。
至此,本地博客搭建完毕。下一步移植到Github
我的账号名是cnfanhua,新建的项目名也就是cnfanhua.github.io
执行下列命令后部署(部署前,需要配置SSh,否则失败)。
至此,个人博客搭建完成。
注意:每次修改后 需要 hexo g 命令保存 然后hexo d 命令上传
设置username和email
生成秘钥
最后得到id_rsa和id_rsa.pub两个文件,把id_rsa.pub的内容粘贴到github中即可
登录后在首页选择 “我要安装”。
创建站点,填写表单。多说域名 这一栏填写的即是你的 duoshuo_shortname
主题配置文件 中设置:
# 多说热评文章 true 或者 false
duoshuo_shortname: '多说域名'
编辑 站点配置文件,新增字段 google_analytics,值设置成你的 Google 跟踪 ID。
编辑刚才的页面(path\source\tags\index.md)
编辑主题配置文件,添加 tags 到 menu 中
View Code
后编辑主题配置文件_config.yml,添加如下代码
找不到git部署 ERROR Deployer not found: git
解决办法
2.创建GitHub技术博客全攻略
3.搭建一个免费的,无限流量的Blog—-github Pages和Jekyll入门
4.HEXO+Github,搭建属于自己的博客
5.Hexo搭建Github静态博客
6.hexo系列教程:(三)hexo博客的配置、使用
7.hexo系列教程:(二)搭建hexo博客
8.NexT
9.廖雪峰Git教程
废话不多说。
环境配置
Node.js(必须) 一路默认安装即可。安装Git(必须) 一路默认安装即可。
Github账号(必须)
安装Hexo
nodejs和git安装完成后,打开’git bash’安装hexonpm install -g hexo-cli
Start
新建一个文件夹(如E:\Hexo),在此文件夹中执行命令hexo init npm install
本地查看
hexo server //hexo s
后在浏览器中输入 http://localhost:4000/
此时,会有一篇文章hello world,对应的文件为 E:\Hexo\source_posts\hello-world.md
文章用markdown语法写.
新建文章
hexo new "New article"
会新建一个名为’New article’的文章,执行以下命令之后查看。
hexo generate //生成静态网页以及css js文件 存放于public文件夹中 hexo server
至此,本地博客搭建完毕。下一步移植到Github
Github
新建repository,项目名必须是:name.github.io(name是你的账号名)。我的账号名是cnfanhua,新建的项目名也就是cnfanhua.github.io
部署
在你的hexo文件夹中有个重要的文件_config.yml,打开编辑,把’cnfanhua’换成你的账号名deploy: type: git repository: https://github.com/cnfanhua/cnfanhua.github.io.git branch: master
执行下列命令后部署(部署前,需要配置SSh,否则失败)。
hexo generate hexo deploy //上传至github 代替 git push...
至此,个人博客搭建完成。
注意:每次修改后 需要 hexo g 命令保存 然后hexo d 命令上传
外配置SSh
打开git bash设置username和email
git config --global user.name "test" git config --global user.email "test@gmail.com"
生成秘钥
ssh-keygen -t rsa -C "test@gmail.com"
最后得到id_rsa和id_rsa.pub两个文件,把id_rsa.pub的内容粘贴到github中即可
NexT主题
下载
gitHub,clone到你的博客目录\themes目录下(E:\Hexo\themes下)git clone git@github.com:iissnan/hexo-theme-next.git
使用
打开站点总配置_config.yml(即E:\Hexo下的_config.yml),找到theme换成next即可(theme: next),记得每一个冒号后面要有一个空格NexT-配置
插件安装
npm install <插件名>
卸载插件
npm uninstall <插件名>
多说评论
使用多说前需要先在 多说 创建一个站点。具体步骤如下:登录后在首页选择 “我要安装”。
创建站点,填写表单。多说域名 这一栏填写的即是你的 duoshuo_shortname
主题配置文件 中设置:
# 多说热评文章 true 或者 false
duoshuo_shortname: '多说域名'
Google 分析
登陆google分析网站获取ID编辑 站点配置文件,新增字段 google_analytics,值设置成你的 Google 跟踪 ID。
google_analytics: UA-XXX...
社交链接,将在侧栏中显示
将以下代码放到站点配置文件social: GitHub: your-github-url Twitter: your-twitter-url Weibo: your-weibo-url DouBan: your-douban-url ZhiHu: your-zhihu-url # 等等
文章目录
主题配置文件 中设置:sidebar: post #自动展示有目录的文章的目录 #sidebar: always #总是展示 #sidebar: hide #隐藏
添加云标签
hexo new page "tags" //新增tags页面
编辑刚才的页面(path\source\tags\index.md)
--- title: TagCloud date: 2016-01-21 16:12:58 type: "tags" comments: false //关闭评论 ---
编辑主题配置文件,添加 tags 到 menu 中
menu: home: / archives: /archives tags: /tags
添加high一下
在 Hexo\themes\next\layout_partials\header.swig 中的 ul 标签加入如下 li 代码:<li> <a title="把这个链接拖到你的Chrome收藏夹工具栏中" href='javascript:(function() { function c() { var e = document.createElement("link"); e.setAttribute("type", "text/css"); e.setAttribute("rel", "stylesheet"); e.setAttribute("href", f); e.setAttribute("class", l); document.body.appendChild(e) } function h() { var e = document.getElementsByClassName(l); for (var t = 0; t < e.length; t++) { document.body.removeChild(e[t]) } } function p() { var e = document.createElement("div"); e.setAttribute("class", a); document.body.appendChild(e); setTimeout(function() { document.body.removeChild(e) }, 100) } function d(e) { return { height : e.offsetHeight, width : e.offsetWidth } } function v(i) { var s = d(i); return s.height > e && s.height < n && s.width > t && s.width < r } function m(e) { var t = e; var n = 0; while (!!t) { n += t.offsetTop; t = t.offsetParent } return n } function g() { var e = document.documentElement; if (!!window.innerWidth) { return window.innerHeight } else if (e && !isNaN(e.clientHeight)) { return e.clientHeight } return 0 } function y() { if (window.pageYOffset) { return window.pageYOffset } return Math.max(document.documentElement.scrollTop, document.body.scrollTop) } function E(e) { var t = m(e); return t >= w && t <= b + w } function S() { var e = document.createElement("audio"); e.setAttribute("class", l); e.src = i; e.loop = false; e.addEventListener("canplay", function() { setTimeout(function() { x(k) }, 500); setTimeout(function() { N(); p(); for (var e = 0; e < O.length; e++) { T(O[e]) } }, 15500) }, true); e.addEventListener("ended", function() { N(); h() }, true); e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>"; document.body.appendChild(e); e.play() } function x(e) { e.className += " " + s + " " + o } function T(e) { e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)] } function N() { var e = document.getElementsByClassName(s); var t = new RegExp("\\b" + s + "\\b"); for (var n = 0; n < e.length; ) { e .className = e .className.replace(t, "") } } var e = 30; var t = 30; var n = 350; var r = 350; var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3"; var s = "mw-harlem_shake_me"; var o = "im_first"; var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"]; var a = "mw-strobe_light"; var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css"; var l = "mw_added_css"; var b = g(); var w = y(); var C = document.getElementsByTagName("*"); var k = null; for (var L = 0; L < C.length; L++) { var A = C[L]; if (v(A)) { if (E(A)) { k = A; break } } } if (A === null) { console.warn("Could not find a node of the right size. Please try a different page."); return } c(); S(); var O = []; for (var L = 0; L < C.length; L++) { var A = C[L]; if (v(A)) { O.push(A) } } })() '>High一下</a> </li>
View Code
开启RSS功能
安装插件npm install hexo-generator-feed --save
后编辑主题配置文件_config.yml,添加如下代码
rss: /atom.xml #rss地址 默认即可
报错
找不到git部署 ERROR Deployer not found: git
解决办法npm install hexo-deployer-git --save
部署类型设置git
hexo 3.0 部署类型不再是github,而是git,修改主题配置文件_config.yml中deploy中的type为gitdeploy: type: git repository: git@cnfanhua.github.com:cnfanhua/cnfanhua.github.io.git branch: master
参考
1.hexo2.创建GitHub技术博客全攻略
3.搭建一个免费的,无限流量的Blog—-github Pages和Jekyll入门
4.HEXO+Github,搭建属于自己的博客
5.Hexo搭建Github静态博客
6.hexo系列教程:(三)hexo博客的配置、使用
7.hexo系列教程:(二)搭建hexo博客
8.NexT
9.廖雪峰Git教程
相关文章推荐
- 五种常用的C/C++编译器对64位整型的支持
- Java Script 中算数运算
- C++利用智能指针shared_ptr实现对象池
- 学习Slim Framework for PHP v3 (七)--route middleware怎么被add进来的?
- java:使用匿名类直接new接口
- C++:const和引用
- Spring通过单实例化Bean简化多线程问题
- 使用ffmpeg实现转码样例(代码实现)
- FFmpeg编程学习笔记二:音频重采样
- 转:PHP获取浏览器类型及版本号
- java正则获取域名
- PHP打印空心菱形
- session不能使用 ASP.NET MVC
- Lua中实现类的原理
- C语言基础之scanf缓冲区
- Myeclipse中java项目转成Web项目
- eclipse 启动失败,错误信息org.eclipse.swt.SWTException: Failed to execute runnable
- Eclipse添加注释
- 转《Qt教程一 —— 第六章:组装丰富的积木!》
- Codeforces 617E ( 莫队算法 Mo's algorithm )