把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)-旅途博客
把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)
此内容为免费阅读,请登录后查看
软妹子0
免费阅读

导语

这是在云影博客看到的一篇技术文章,云影博客之前使用的使用的是 emlog5.3.1 版本,但是官方放弃更新云影也使用的学生机经不起折腾,所以在百度以后,了解到了可以把纯静态的网页部署到 github,那么我想起了一些纯静态的博客以前也想做,只是觉得麻烦 例如 Hugo、Hexo、Jekyll、Pelican 等等,最终在逼乎的建议参考下,选择了 Hexo

安装 git 到 Windows

目前云影只把项目放到 windows 环境,并从本地部署到 git,MAC 的后续可能会更新。

下载 git 到本地 https://git-scm.com/

打开安装包,并一路 next 即可 不懂的可以参考 windows 系统 Git 安装详解

安装 nodeJs

从官网上下载 node.js 安装包 http://nodejs.cn/download/
打开安装包,除了修改安装路径,其余的也是可以一路 next 即可 不懂的可以参考 Node.js 入门一安装篇

安装 Hexo

在确保 git 和 node 正常安装完成后,就可以搭建我们的主角 ——Hexo 了

在本地新建一个文件夹

图片[1]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

在这个文件夹里右键,点击 Git Here

图片[2]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

配置全局的 git 信息,方便以后部署到 github

git config --global user.name "GitHub用户名"
git config --global user.email "GitHub邮箱"

生成 ssh 密钥文件

ssh-keygen -t rsa -C "Github邮箱”

前往 github 创建个人仓库 https://github.com/new

名字必须是 username.github.io 这里的 username 指代的是你的 git 用户名

权限选择 Public (公开)

新建仓库完成后,可以到个人设置添加 ssh keys

图片[3]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

完了以后我们使用命令

ssh git@github.com

进行验证,验证结果如下

图片[4]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

只有出现这样的界面才算是成功

安装 hexo 到本地环境

在你当前文件夹,打开 git 命令行并运行

npm install -g hexo

安装 hexo,安装完成结果图

图片[5]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

我们输入

hexo

查看 hexo 是否正确安装并且能够运行 hexo 命令

图片[6]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

开始初始化 hexo 博客工程

hexo init
图片[7]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

编译博客


hexo g
图片[8]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

启动本地服务器对博客进行预览

hexo s
图片[9]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

这时候我们可以在浏览器打开 localhost:4000 就可以访问我们的网站了

图片[10]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

常用的 hexo 命令

# 部署到 git 平台或者其他平台
hexo d
# 清除缓存
hexo clean
# 升级 hexo 
npm update hexo -g
# 合并使用 例如 清除缓存并编译然后部署到 github
hexo clean && hexo g && hexo d
# 合并使用 例如 清除缓存并编译然后启动本地服务器
hexo clean && hexo g && hexo s

安装主题

hexo 的主题有很多很多,官方默认的主题是 landscape ,主流的有:next、yilia、indigo 等等


# 这里以 next 主题为例
git clone --branch v5.1.2 https://github.com/iissnan/hexo-theme-next themes/next

由于主题一般都比较大,再加上 github 是国外的,可能克隆起来比较慢,耐心等待即可

图片[11]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

安装完成示例图

图片[12]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

修改配置文件,你博客根目录的_config.yml 文件

图片[13]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

把 theme 默认的 landscape 改成 next

theme: next
图片[14]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

然后重新启动一下我们的本地服务器 建议先清除并编译

如果报以下一样的错误

图片[15]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

这是因为 hexo5.0 把 swig 给删除了,需要手动安装一下

npm i hexo-renderer-swig

再次访问

图片[16]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

这样我们的主题就安装完成了 更多的内容请参考你使用的主题说明文档

部署到 GitHub

在部署之前,我们需要安装 hexo 的部署插件

npm install hexo-deployer-git --save

修改网站的_config.yml

图片[17]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

改成这样

deploy:
  repository: git@github.com:efarxs/efarxs.github.io.git #刚才创建的 github 仓库的 git 地址 这里以我的作为示例,请务必改成你自己的
  type: git
  branch: master

然后重新编译,并执行部署命令


hexo d
图片[18]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

成功部署后,就可以登录 github 的项目路径查看该网站了

http:// 你的用户名.github.io

安装 hexo-admin 可以给可视化管理文章

npm install hexo-admin --save

安装好后重新编译一下,并启动本地服务器,然后浏览器打开 localhost:4000/admin 就可以进入 hexo-admin 界面了

在这里你可以编辑 / 发布文章,还可以存为草稿

图片[19]-把 hexo博客程序 搭建在本地并部署到 GitHub(无需服务器)

具体使用方法可以参考 https://github.com/jaredly/hexo-admin

配置 github Pages 绑定自己的域名到 github

打开你的项目,点击 Settings->Options,下拉找到 GitHub Pages 配置

默认只需要填写 Custom domain 的值就好,需要先把你的域名 CNAME 解析到 username.github.io. 这里的 username 指代的是你的 GitHub 用户名

然后就可以直接用你的域名访问了,不会的可以参考 GitHub Pages 绑定个人域名

小结

以上就是我在搭建 hexo 博客的全过程了,当然后续的配置修改和使用模板完全是根据个人习惯的,这里这是举个例子作为演示。如果你真的想更深入 hexo,可以去 hexo.io 了解更多关于 hexo 的内容。感谢你的阅览!

本篇文章版权为云影博客所有

速度演示地址https://blog.efar.top/

© 版权声明
THE END
喜欢就支持一下吧
点赞2
分享
评论 抢沙发

请登录后发表评论