Hexo+githubPages创建个人网站(持续更新中。。。)

本文主要内容:使用Hexo在本地生成静态博客,并部署到github上

安装Hexo前的准备

安装node.js

nodejs的官网下载安装,LTS版本是稳定版,这里我选择稳定版,注意:这是64位的

nodejs

安装完成后,cmd命令,进入dos窗口,输入node -v 显示版本号就说明安装成功,我安装之后,显示如下图

node-v

设置npm淘宝镜像站

  • npm默认的源的下载速度可能很慢,这里将npm的源设置成淘宝镜像站。有点类似阿里云镜像
npm config set registry "https://registry.npm.taobao.org"

[下面几步,不是小白的话可以跳过](# 配置SSH)

申请github账号

创建博客仓库

  • 这里有个注意点,仓库名应该为:用户名.github.io。例:chudonghai.github.io
  • 详细教程,请参见创建博客仓库教程

安装git

  • git官网下载地址,支持多平台,我这里选择windows版
  • 下载完成后,直接双击默认安装即可,也可以自定义安装,这里不再赘述。

配置SSH

这个跳转的语法实现,请参见

  • 安装完git后,打开git bush终端
  • 设置user.name和user.email
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"
  • 生成ssh密匙(命令中的“C”是大写的哦)
ssh-keygen -t rsa -C "你的GitHub注册邮箱"
  • 然后连续回车3次,默认空密码创建Key
  • 生成的ssh key文件在/users/用户名/.ssh文件夹下id_rsa.pub中,将内容添加到github中新创建的SSH key中保存即可

安装Hexo

  • 执行以下命令,安装Hexo和相应的插件
# 安装hexo
npm install hexo-cli g
# 如果这个安装失败,就试试这个,如果成功就跳过这步
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install hexo-cli -g

# 初始化博客文件夹
hexo init blog
# 切换到该路径
cd blog
# 安装hexo的扩展插件
npm install
# 安装其它插件
npm install hexo-server --save
npm install hexo-admin --save
npm install hexo-generator-archive --save
npm install hexo-generator-feed --save
npm install hexo-generator-search --save
npm install hexo-generator-tag --save
npm install hexo-deployer-git --save
npm install hexo-generator-sitemap --save
# 这个是图片存放问题,后面会跟进更新
npm install https://github.com/CodeFalling/hexo-asset-image --save

初探Hexo

  • 第一次使用hexo,在本地创建服务器使用。
# 生成静态页面
hexo generate
# 开启本地服务器
hexo s

问题:为什么访问http://localhost:4000/ 无反应?

  • 解决方法:可能是由于端口问题引起的。使用Ctrl+C中断本地服务,使用命令hexo s -p 5000重新开启本地服务,访问http://localhost:5000/可以看到博客页面了。

将hexo博客部署到github上

  • 修改配置文件blog/_config.yml,修改deploy项的内容,如下所示:
# Deployment 注释
## Docs: https://hexo.io/docs/deployment.html
deploy:
  # 类型
  type: git
  # 仓库
  repo: git@github.com:chudonghai/chudonghai.github.io.git
  # 分支
  branch: master

注意:

  • type: git中的冒号后面由空格。
  • 将git@github.com:chudonghai/chudonghai.github.io.git中的用户名换成自己的用户名git@github.com:github_username/github_username.github.io.git。

部署hexo

  • 输入下面的命令将hexo博客部署到github中:
# 清空静态页面
hexo clean
# 生成静态页面
hexo generate
# 部署 
hexo deploy

域名绑定(以阿里云为例)

参见此链接

  • 在source文件夹下新建文件CNAME,将域名xxx.com放到文件中,保存即可。

写作

  • 创建新的博客hexo new 文件名即可创建对应的.md文件
  • 写作完成后,记得重新部署

hexo命令缩写

  • hexo支持命令缩写,如下所示。hexo g等价于hexo generate
hexo g:hexo generate
hexo c:hexo clean
hexo s:hexo server
hexo d:hexo deploy

hexo组合命令

# 清除、生成、启动
hexo clean && hexo g -s
# 清除、生成、部署
hexo clean && hexo g -d

如何换主题?

  • 下面需要重新写,这里我采用的是直接去next官网下载压缩包,然后解压

  • 将主题下载后,放到themes文件夹中改名为next。例如,下面命令安装next主题:git clone https://github.com/iissnan/hexo-theme-next themes/next

  • 然后设置站点配置文件_config.yml:

    theme: next
    
    

hexo相关未解决问题

hexo博客图片问题

hexo添加打赏功能

保存Hexo博客源码到Github上

博客迁移

首先认识两个问题。

  • 上面生成的文件,一部分留在本地电脑上,另一部分被部署到github远端了
  • 一个项目默认只有一个分支,可以新建分支

部署到远端的部分:hexo生成的静态博客文件,默认放在master分支上

留在本地电脑上的部分:hexo的源文件、配置文件等,都留在本地

方法:

新建一个分支,save

更改我们的项目默认分支为save

clone你的项目到你的Hexo目录下。

git clone https://github.com/chudonghai/chudonghai.github.io.git

执行下面的命令将你的博客的原文配置等等保存到分支save上

git remote add origin https://github.com/JiaoMeichen/JiaoMeichen.github.io.git
git add .
git commit -m "your description"
git push origin save

确认你的_config.yml配置是提交到master分支

此时,hexo生成的静态博客文件默认放在master分支上。

hexo的源文件放在save分支上,换电脑时直接git clone save

博客图片问题

CodeFalling/hexo-asset-image插件的使用方法

posted @ 2019-08-08 09:57  向南风  阅读(249)  评论(0编辑  收藏  举报