查看原文
其他

博客搬家记:从 Wordpress 到 Hexo+Github

00的备忘录 设计极客 00 2022-11-03


拖延整整两年后,终于花了一周时间把博客用 Hexo 托管到了 Github 上。


(注:以下记录,仅适用于 Mac 系统)


Hexo是啥


Hexo 是由 Node.js 驱动的一款快速、简单且功能强大的博客框架。可以快速将 Markdown 格式的文档生成静态页面。是越来越笨重的 Wordpress 和麻烦的空间管理的替代方案。


一. 安装 Hexo


首先翻看一遍 Hexo 官方文档(https://hexo.io/)


1.环境准备


安装 Node.js

推荐方法是用nvm安装 Node.js 。


cURL:

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh


Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh


nvm 装好后,重启 terminal,然后安装 Node.js:

$ nvm install 4


当然,也可以直接到 Node.js 官网下载最新版本安装。


安装 Git


按照Github提示,创建SSH秘钥:


$ mkdir ~/.ssh #创建ssh命令

$ cd ~/.ssh

$ ssh-keygen -t rsa -C "your_email@example.com" #注意更改Email地址

$ pbcopy < ~/.ssh/id_rsa.pub


此时,pdcopy命令已经将id_rsa.pub内容复制到剪切板。


登录 github:https://github.com/settings/ssh 点击Add an SSH Key,Title 部分填写一个所用电脑的名称,然后在Key部分填写之前通过pdcopy命令复制的内容。生成 key https://help.github.com/articles/generating-ssh-keys/


$ git config --global user.name "yourusername $ git config --global user.email "youremail"


2.安装 Hexo


$ npm install -g hexo-cli


这个时候如果报错,记得加 sudo


$ sudo npm install -g hexo-cli



二. 配置 Hexo


进入想要存放博客的文件夹,初始化设置:


$ hexo init

$ npm install


初始化成功后,文件夹里会有这些东西:

.

├── _config.yml #配置文件

├── package.json #应用程序数据

├── scaffolds

├── source #网站内容

| ├── _drafts #草稿

| └── _posts #文章

└── themes #主题


配置文件的详细说明请查看官方文档。



三. 从 Wordpress 迁移


首先安装 hexo-migrator-wordpress 插件:


$ npm install hexo-migrator-wordpress --save


登录 Wordpress 后台,在“工具”-“导出”中导出所有记录。


$ hexo migrate wordpress <source>


source 是 Wordpress 导出文件的存放目录。


Duang!妥妥地导入到 _posts 目录中了!



四. 本地访问博客


生成静态文件: $ hexo generate

启动本地服务: $ hexo server


这时提示 Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.


然后在浏览器打开 http://0.0.0.0:4000/,就可以看到迁移好的博客啦!



五. 挑选主题


可参考 有那些好看的 Hexo 主题?(https://www.zhihu.com/question/24422335)


下载主题:git clone https://github.com/xxxx themes/xxx


启用主题:克隆/下载 完成后,打开 站点配置文件 “_config.yml”,找到 theme 字段,并将其值更改为下载的主题名字。


剩下的就根据主题使用文档,按照自己的喜好修改了。


我选的 NEXT主题 胜在 说明文档 超详细的~


挑选好主题后还做了以下修改:

  • 增加了侧栏头像

  • 增加了社交网站链接

  • 增加了 RSS 链接

  • 重新整理了分类

  • 更新了建站时间

  • 增加了 DISUQS 评论模块

  • 增加了标签页页面

  • 增加了 JiaThis 分享

  • 增加了 PDF 文档展示

  • 增加了公益404页面


待解决问题:

  • 增加 Google 分析

  • 站内搜索前端如何展现



六. 安装插件


站内搜索

hexo-generator-search插件为 Hexo3 提供搜索功能。

安装:

$ npm install hexo-generator-search --save


Feed

hexo-generator-feed 可以生成Atom 1.0 或 RSS 2.0 feed。

安装:

$ npm install hexo-generator-feed --save


Sitemap

安装:

$ npm install hexo-generator-seo-friendly-sitemap --save


嵌入 PDF

hexo-pdf

安装:

$ npm install --save hexo-pdf

添加PDF 的命令:

{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}



七. 配置 Github 并上传


新建跟用户名同名的 repository,以“.github.io” 为后缀。


创建成功后,点击界面右侧的Settings,打开页面后找到GitHub Pages,点击Launch automatic page generator,生成 page。


然后在网站配置文件 _config.yml文件中,找到Deployment,修改配置:


deploy:

type: git

repo: git@github.com:yourname/yourname.github.io.git

branch: master


如果使用 git 方式部署,执行 npm install hexo-deployer-git --save命令来安装插件。


但是这时出现了错误提示


npm ERR! Darwin 15.2.0

npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "hexo-deployer-git" "--save"

npm ERR! node v4.2.4

npm ERR! npm v2.14.12


npm ERR! shasum check failed for /var/folders/n4/m1w5r2rj3y77vpn_s6g87s180000gn/T/npm-8320-c250e6be/registry.npmjs.org/moment/-/moment-2.11.0.tgz

npm ERR! Expected: 584f5fb87c1f637f12937edce127dde2d206d705

npm ERR! Actual: f3f4cb5f46c790b29b9b7bdce8435fe70ad58dbd

npm ERR! From: https://registry.npmjs.org/moment/-/moment-2.11.0.tgz


尝试数次,最终先用 npm install hexo-deployer-git 安装,再执行npm install hexo-deployer-git --save


安装成功后,在当前目录进行 deploy 操作


hexo d


上传成功后,访问 yourname.github.io ,测试是否可以正常访问。


八. 绑定域名


在 Github 里生成 CNAME 文件


为了绑定域名,首先在 Hexo 的 "public" 文件夹中新建一个CNAME文件(没有后缀),文件内容为你要设置的域名。目的是将你的域名(如 uegeek.com )指向 Github 服务器。

Deploy 到 Github上去后大概需要几分钟生效。


在 DNS 中添加解析


几年前坑爹地在 Godaddy 买的域名,难用得要死,还时不时被墙。于是把 DNS 换成 国内的服务 Dnspod。请擦亮眼看清楚 DNS Setting 在哪里设置……


(不知道为什么默认跳转的是 DNS ZONE FILE 页面,害我白等了两天……)


然后到DNSPod新建域名,并添加 CNAME 记录指向 kidult00.github.io 。


当打开 uegeek.com,看到改头换面的博客后,持续一周的博客搬家活动终于告一段落,内心默默地原谅自己拖延了两年 T.T




九. 常用命令


命令

执行

hexo new [layout] <title>

新建

hexo publish [layout] <filename>

发布草稿

hexo g

生成静态文件

hexo d

上传更新

hexo publish [layout] <filename>

清除缓存文件(db.json) 和 已生成的文件 (public).

hexo s

启动本地服务器



↓ 访问原文可以看到uegeek.com 移动端效果

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存