记录hexo博客框架+码云简单搭建在线博客并更换主题模板

首先下载git和nodejs

---

1-安装和初始化

创建一个新文件夹,git命令行进入文件夹的位置

配置淘宝npm镜像(之前不用镜像后面初始化失败了无数次,大多数是主题文件夹是空的,没有文件,而且下载非常慢)

npm install -g cnpm --registry=https://registry.npm.taobao.org

image.png

安装hexo(配置镜像后用cnpm) npm install -g hexo-cli

image.png

安装后这时输入hexo -v查看版本有可能报错,查询后发现是power shell的问题(我用的是vs code终端)
解决步骤
https://www.jianshu.com/p/cfbd867b4766
成功安装后

image.png

安装后在项目文件夹终端输入以下指令
将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <命令>
如:hexo server
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

image.png

初始化,也可以hexo init空格自定义文件夹名

image.png

如果初始化失败大多数是当前文件夹不是空的(之前这个文件夹装包失败留下了一个.git文件)

image.png

初始化后使用npm install, 配置了淘宝镜像使用cnpm install

image.png

hexo g 生成静态文件

image.png

---

2-启动本地服务器和新建博客文章

hexo s尝试开启本地服务器

image.png

浏览器打开4000端口,看到hello world就成功了

image.png

成功建立服务后回到端口,ctrl+c先关闭端口,尝试建立一篇新的博客文章
输入命令hexo new "My New Post" --hexo会创建一个md文件

image.png

通过命令行进入路径修改md文件,我是在VS code打开md文件,可以先下载vs code插件用来更好的支持在vs code编辑md文件,这里不过多记录

image.png

最后一个插件是用来支持粘贴图片的

在source/_posts/里找到新建的md文件,使用vs code编辑一下md文件

image.png

此时按md语法放链接的话没有路由跳转不了,链接先直接放地址

image.png

修改后回到vs code终端(如果用命令行修改md文件,需要退回项目文件夹下)
三部曲,清理,生成,开启服务
使用hexo clean命令清理

image.png

使用hexo g命令生成

image.png

再次使用hexo s命令开启服务

image.png

浏览器输入http://localhost:4000,显示刚才的md文件内容了

image.png

---

3-尝试推送到码云仓库

码云创建一个开源仓库

image.png

复制链接

image.png

回到本地博客项目修改_config.yml 文件,修改deploy的值(最下面)然后保存
repo: 刚才在码云仓库复制的.git链接
注意不要有双引号也不要有逗号 如"git",

image.png

回到终端输入命令配置环境和上传到码云：
git config --global user.name空格+你的码云的名字 //注:有无双引号都OK,如"[email protected]"/[email protected]
git config --global user.email空格+你的码云的邮箱

输入后可以用命令检查是否输入有误
git config user.name
git config user.email

image.png

下载deploy-git命,用来部署到GitHub/码云等托管仓库
cnpm install hexo-deployer-git --save

image.png

输入部署命令 hexo-d 开始部署

image.png

此时需要输入账户名和密码,输入正确的码云用户名和密码便好,如果输入错误查看这篇记录的步骤进行修改
https://www.jianshu.com/p/ff8816254b6f
推送好后

image.png

回到码云已经推送好代码片段了,点击服务里的Gitee Pages

image.png

勾选强制使用HTTPS(不勾选也OK),点击启动

image.png

image.png

image.png

访问网站地址,发现没有CSS样式

image.png

在码云Gitee Pages服务页面先把服务暂停

image.png

回到项目文件夹修改_config.yml文件,把里面的root:/修改为/项目文件夹名称(不用输入hexo d)

image.png

回到项目使用hexo clean 清理& hexo g生成

image.png

再部署到码云仓库

image.png

回到码云Gitee Pages页面再次启动服务

image.png

启动后访问地址后正常显示了

image.png

---

4-尝试更换主题模板

hexo的默认主题是landscape,放在themes文件夹下,尝试更换yilia模板主题
项目文件夹输入命令 git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
第一次克隆失败了文件夹,第二次同样命令成功了...

image.png

image.png

修改_config.yml文件里的themes

image.png

回到命令行重新清理并生成

image.png

重新开启本地服务预览一下

image.png

成功更换主题了

image.png

点一下按钮也有样式出来,就OK了 具体内容后期再去修改完善

image.png

回到命令行 Ctrl+c关闭一下本地服务 hexo g推送

image.png

回到码云输入Gitee Pages 服务网站地址,点击更新,会重新部署,之后如果没有更新主题请等待一下,我刷新了好几次主题没有更新,准备关闭服务重新启动的时候,主题刷新了.

image.png

图片无法加载的问题请点击有记录
https://huang_yu_feng.gitee.io/myblog/2019/12/21/hexo%E5%AE%8C%E5%96%84/