点击上方蓝字"优派编程"选择“加为星标”,第一时间关注原创干货

相关服务:台湾站群服务器租用

hexo+gitee(码云)搭建个人静态博客(避开所有坑)

http://wp.fang1688.cn/study/253.html

简介

Hexo简介+gitee简介

演示网站,这是我自己搭建好的,请大家参考————http://fangxiansheng123.gitee.io/myhexoblog/

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架。大家可以进入hexo官网进行详细查看,因为Hexo的创建者是台湾人,对中文的支持很友好,可以选择中文进行查看。

gitee是一个托管代码平台,并可以生成自己的静态网站。可以在先在本地电脑搭建自己静态博客,更新后通过git命令上传到免费的服务器gitee码云当做静态服务器使用自己的网站。

1.安装部署

1.1 —–hexo史上最全搭建教程

请看这篇文章:https://blog.csdn.net/sinat_37781304/article/details/82729029

1.2——Hexo博客写文章及基本操作

请看这篇文章:https://zhuanlan.zhihu.com/p/156915260

1.3——hexo+gitee(码云)搭建个人博客

请看这篇文章:https://blog.csdn.net/weixin_45631738/article/details/104716374

大家可以参考上面,下面是我自己总结的命令行。按照顺序来大家慢慢尝试,具体查阅上面资料!

npm install hexo-cli -g // hexo的安装
hexo init blog //初始化项目
hexo clean //清空已经存在的hexo网站文件
hexo generate(可简写g) //依据网页文件和新的css样式生成新的网站文件
hexo server(可简写为s) //启动本地服务器,可以在localhost:4000查看网站修改效果
hexo new "我的第一篇文章" //创建一篇文章,根目录的source里面的md文件可以修改文章内容

npm install hexo-deployer-git --save     //安装上传到仓库的插件,才能进行发布文章的命令
hexo g --d //发布文章 一键部署并推送到gitee仓库上

2.遇到问题

2.1———hexo部署在码云中 无样式问题

在本地localhost:4000 运行正常,如下图:

c6982ea21b3849dd2a71f5d94ee14296.png

上传到gitee后再码云首页显示如下图:

916b7817ca76e6f42517a9e136adcc07.png

解决方法

找到根目录下的_config.yml中的url 和 root

# url: http://yoursite.com

# root: /

url修改为你码云中的地址

示例:

4e9cba0dffd2de3c881cde7d723192e5.png

dd110837da0052e7e2ebfa2caf3b2617.pngroot修改为你的仓库名 我的为 myhexoblog

url修改如下图,复制

8521266d029bc3f7d610001ad0b466aa.png

f8dcd43bd42cb554d40e38cb09b094d3.png

输入命令: hexo g 和 hexo d 更新仓库

8fb6c165dfec8fc288fcd25f45f1298a.png

在Gitee Pages 服务中 点击更新 重新部署 Gitee Pages

d372418e9a43397e0aea97f6dee4034a.png

更新完成之后就能够正常加载了

2.2———码云中仓库名字和路径一致并改为语言JavaScript

首先我们需要注册码云的账号,然后在创建一个仓库,这里初次使用码云的话可以,先看一下码云入门
当然注册账号我们可以直接进入码云官网:https://gitee.com/都是中文一看就会的那种
创建仓库
特别要注意这里有个大坑:仓库名称,使用语言(JavaScript),访问权限(公开)

7753f14e074ca30c7c11da114b943611.png

2.3——— _config.yml配置记得留空格

作为小白的我,成功的掉进这个坑里爬了好几天,没爬出来,最终请教大神帮忙,才发现是此处的原因。
当时,写的仓库名不是我的用户名,导致码云pages部署的路径有问题,导致相对路径不对,读不到css样式和js运行文件,所有进去后就是这个样子,所以依次告警大家不要入坑

修改配置文件 在blog主目录下找到 _config.yml 打开进行配置,在代码的最底下找到此处

修改之后的样子,
特别注意这里还有个坑:修改代码时候注意空格,例如 repo:后面都是有空格的,删除空格之后,后面运行的时候就会报错,这是编码的规定,还有就是deploy一定从行首开始写,不要加空格,注意格式6a0e33773ea3d56263143847c7728562.png

3.大功告成

0013de5cc52a0e0c58ff7851023c3d9b.png

往期推荐

wordpress插件fb-reply:评论后可见隐藏的内容

MicroPython的嵌入式开发与物联网应用(视频笔记源码)学习资料下载

3个情人节表白网页在线生成(附最新阿里云扩容码)

最新亚马逊视频课程学习资源百度网盘下载(文档、视频、笔记)

2021最新小程序云开发学习资源汇总

VUEJS实例中DATA属性的三种写法及区别


最近小编方包新开了一个小程序商城店铺!不买点去看看也好,为我的小店铺涨涨流量也好!谢谢了!

我的【知识学堂小店】,点击下方小程序链接进入商城即可!

知识学堂小店(点击此处跳转)

d702ee604be2b8ba52b835dee76251d8.png


送福利!关注下方的公众号:“优派编程”,搜索关键词“资料”,即可获得软件app下载资源和python、java等编程学习资料!

6b29b245b7ff57c1497c44c0527da38c.png

点击左下方“阅读原文”关注方包it博客:

https://www.fang1688.cn

领取更多福利!