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

in #cn • 7 years ago

github&hexo.png

拖延了整整两年，今天终于把博客用 Hexo 托管到了 Github 上。(以下记录，仅适用于 Mac 系统)

Hexo是啥

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

一. 安装 Hexo

首先翻看一遍 Hexo 官方文档

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 "[email protected]" #注意更改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 主题？

下载主题：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 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: [email protected]: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。参考Godaddy注册商域名修改DNS地址。请擦亮眼看清楚 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启动本地服务器

You might be also interested in:

技术贴：

中欧系列：

@kidult00 . Thanks for Upvoting !

#blog #tutorial #steemit #life
7 years ago in #cn by
$0.04
  • Past Payouts $0.04
  • - Author $0.04
  • - Curators $0.00
5 votes
Reply 4
Sort:  
  • Trending
    • [-]
     7 years ago  

    Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:
    https://www.jianshu.com/p/fd233d967e88

    $0.00
      Reply
      [-]
       7 years ago  

      谢谢！这是我的简书帐号

      $0.00
        Reply
        [-]
         7 years ago  

        hi friends steemians, I am newcomer from Nanggroe aceh darussalam NAD is the most western tip of indonesia, best regards and compact greeting always .. thank you

        $0.00
          Reply