Hexo 搭建个人博客

admin / 文章 / ... / Reads: 850

Hexo 搭建个人博客

参考Hexo中文文档搭建个人博客,首先安装最新版本的NodeJS, Git。

安装 Hexo

$ npm install -g hexo-cli

安装完成以后,需要初始化一下项目,执行下列命令

$ hexo init
$ npm install hexo init
$ npm install

完成以后,项目大概目录就是这样的

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

接下来可以在本地启服务来查看一下项目的初始状态

$ hexo server
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

就可以访问 http://localhost:4000

发布到github并设置成个人博客

github上新建一个仓库

登录自己的github后,在界面右上角用户信息点击左边的加号,新建一个repository

3599953234-5c6f628090f47_fix732

然后给新建的仓库起个名字,注意:这个名字必须跟用户名一致,github才会默认设置成用户的博客

2284436214-5c6f62ed29fc1_fix732

项目建好以后,就是一些信息的设置

3806790975-5c6f6352b6dbd_fix732

3868282944-5c6f6362acc4a_fix732

设置页面里面有分支选项,如果有master分支,会默认成博客的首选代码。注意是master分之。

将本地搭建好的hexo发布到github上

在项目中生成静态文件

$ hexo generate

简写,结果是一样的

$ hexo g

安装插件

npm install hexo-deployer-git --save

修改网站配置文件_config.yml,添加deploy信息

deploy:
  type: git
  repo:
    github: https://github.com/cxinping/cxinping.github.io.git
  branch: master

上面的repo的配置信息,替换成自己的项目名字

本地跟远程github的连接已经建立,在项目中,直接生成静态文件,上传就可以了

$ hexo clean  //清除缓存文件db.json和已生成的静态文件public
$ hexo g   //生成网站静态文件到默认设置的public文件夹
$ hexo d   //部署网站到设定的仓库

手动安装样式 landscape

git clone https://github.com/hexojs/hexo-theme-landscape.git themes/landscape

上传本地图片

修改站点配置文件

/* 路径 /hexo/_config.yml
post_asset_folder: true

修改 _config.yml这之后,当你 hexo n XXX 时,会自动在 /hexo/source/_post 下生成一个 XXX 文件夹

安装路径转换插件|踩坑

注意,一定要下

npm install https://github.com/CodeFalling/hexo-asset-image --save

正确生成为

(base) MacBook-Pro:liukeya xinping$ hexo g
INFO  Validating config
INFO  Start processing
update link as:-->/2023/01/19/%E5%85%8B%E4%BA%9A%E8%90%A5%E9%94%80%E9%93%81%E5%BE%8B/lky1.jpg
update link as:-->/2023/01/19/%E5%85%8B%E4%BA%9A%E8%90%A5%E9%94%80%E9%93%81%E5%BE%8B/lky2.jpg
update link as:-->/2023/01/19/%E5%85%8B%E4%BA%9A%E8%90%A5%E9%94%80%E9%93%81%E5%BE%8B/lky3.jpg
update link as:-->/2023/01/19/%E5%85%8B%E4%BA%9A%E8%90%A5%E9%94%80%E9%93%81%E5%BE%8B/lky1.jpg
update link as:-->/2023/01/19/%E5%85%8B%E4%BA%9A%E8%90%A5%E9%94%80%E9%93%81%E5%BE%8B/lky2.jpg
update link as:-->/2023/01/19/%E5%85%8B%E4%BA%9A%E8%90%A5%E9%94%80%E9%93%81%E5%BE%8B/lky3.jpg

注意,不要下

npm install hexo-asset-image --save

hexo-asset-image@1.0.0版本根本无法在 hexo g 生成的 *.html 文件中生成正确的 img src 的路径

错误生成如下,无法载入图片

$ hexo g
INFO  Start processing
update link as:-->/.com//Test.jpg
update link as:-->/.com//Test.jpg
......

本地测试+上传到GitHub

hexo g

hexo d

参考资料

使用Hexo和GitHub搭建个人博客
https://www.jianshu.com/p/e4cc63d59be5

使用账号密码来操作github
https://zhuanlan.zhihu.com/p/400646680

Comments

Make a comment

Author: admin

Publish at: ...

关于作者

王硕,网名信平,十多年软件开发经验,业余架构师,熟悉 Java/Python/Go 等,喜欢读书,音乐和宅在家里。
专注于研究互联网产品和技术,提供中文精品教程。 本网站与其它任何公司及/或商标无任何形式关联或合作。
Email: xujieiata@163.com

www.ultrapower.com ,王硕的博客,专注于研究互联网产品和技术,提供中文精品教程。 本网站与其它任何公司及/或商标无任何形式关联或合作。