hexo搭建博客笔记！

2015-05-28 阅读:次

######安装 hexo

1 2	npm install -g hexo （-g 是指全局安装 hexo）查看安装成功与否，输入命令：hexo -v 查看会有版本等信息列出。

切换到新建的博客空目录执行：hexo init 初始化
#执行过程如下：
D:\WorkSpace\wwwroot\gitHub>mkdir test
D:\WorkSpace\wwwroot\gitHub>cd test
D:\WorkSpace\wwwroot\gitHub\test>hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
[32mINFO [39m Install dependencies
added 190 packages from 445 contributors and audited 196 packages in 30.106s
15 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
INFO  Start blogging with Hexo!

hexo init生成项目文件

######浏览博客项目：

hexo s   //http://localhost:4000  默认端口

D:\WorkSpace\wwwroot\gitHub\test>hexo s
INFO  Validating config
FATAL Port 4000 has been used. Try other port instead.
...

######指定端口访问：

#报错端口占用，指定端口访问：
hexo s -p 5000  //http://localhost:5000 指定端口

D:\WorkSpace\wwwroot\gitHub\test>hexo s -p 5678
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:5678 . Press Ctrl+C to stop.
...

生成的默认项目

######切换主题：
#####官网找到喜欢的主题：https://hexo.io/themes/
######比如我喜欢这个风格的：https://github.com/litten/hexo-theme-yilia
######安装文档安装步骤如下：

######在自己博客根目录下执行如下命令，会把yilia主题clone到根目录下的themes下

1	git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

修改自己hexo博客项目根目录下的 _config.yml文件: theme: yilia后重启！
######更新yilia主题：
cd themes/yilia
git pull

######修改 _config.yml配置文件：

npm i hexo-generator-json-content --save

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true

hexo clean                    清除静态缓存
hexo g(generate)              生成博客文章
hexo s(server)                生成页面进行本地预览
hexo d(deploy)                部署博客文章

######代码高亮显示：

sublime安装插件Babel、 EJS2，然后view试图菜单设置语法EJS 2，选择对应的选项

######不蒜子统计页面访问量

http://ibruce.info
当然也可用百度统计：https://tongji.baidu.com

<!--文章阅读量-->
 <span id="busuanzi_container_page_pv" style="float:right;margin-right:5%;color:grey;">
阅读:<span id="busuanzi_value_page_pv" style="color:red;"></span>次
</span>
 <!--文章阅读量-->

######页面点击小红心JS,在hexo/themes/yilia/layout/_partial/footer.ejs最后一行添加：<script type="text/javascript" src="/love.js"></script>,love.js在hexo/themes/yilia/source下新建，内容如下：

1
2

!function(e,t,a){function r(){for(var e=0;e<s.length;e++)s[e].alpha<=0?(t.body.removeChild(s[e].el),s.splice(e,1)):(s[e].y--,s[e].scale+=.004,s[e].alpha-=.013,s[e].el.style.cssText="left:"+s[e].x+"px;top:"+s[e].y+"px;opacity:"+s[e].alpha+";transform:scale("+s[e].scale+","+s[e].scale+") rotate(45deg);background:"+s[e].color+";z-index:99999");requestAnimationFrame(r)}function n(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),o(e)}}function o(e){var a=t.createElement("div");a.className="heart",s.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:c()}),t.body.appendChild(a)}function i(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function c(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var s=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),n(),r()}(window,document);

######Sitemap方式提交网页
在 Hexo 根目录打开命令行工具，执行以下命令：

npm install hexo-generator-sitemap --save
hexo clean
hexo g
在hexo项目public目录下生成sitmap.xml

######hexo/source文件夹里面加一个404.html

#https://hexo.io/zh-cn/docs/

github pages搭建：

windows下复制C盘当前用户目录下隐藏文件夹.ssh里的id_rsa.pub内容,粘贴到gitee中的设置ssh公钥。
创建仓库并复制仓库地址：(默认hexo博客本地已经搭建完毕)
hexo/_config.yml添加如下配置：其中repository改成自己刚创建的仓库地址

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository:  https://github.com/DragonersLi/xxx.git
  branch: master

我创建的仓库是note,更改如下配置：

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中，例如 http://yoursite.com/blog，
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root: /note/
url: https://DragonersLi.github.io

执行hexo clean && hexo g && hexo d 清除本地生成的静态页面，重新生成并提交git
在仓库里找到服务Gitee Pages或者直接仓库界面url添加pages访问，例如：https://github.com/DragonersLi/note/pages
部署分支master;部署目录空；强制使用https；然后更新！
已开启 Gitee Pages 服务，网站地址： https://dragonersli.github.io/note
#####页面样式错乱和图片无法加载问题
配置问题

本文链接： https://dragonersli.github.io/2015/05/28/hexo搭建博客笔记！/
本人声明： 此文只作为自己日后工作学习中遇到类似问题方便快速回忆解决问题的笔记，仅供参考！
版权声明：

本文首发于すせなの筆記转载无需联系本人，但要注明来源本站！