hexo 搭建博客

相关资料
- Git手册
- hexo手册
- next主题手册

搭建环境

序号名称下载地址备注
1Git[点我下载Git]mac安装了xcode会自带git
2NodeJS[点我下载]最好使用nvm安装
3Hexo终端输入npm install -g hexo-cli先安装node

配置Git

在终端输入以下命令配置全局本地信息

$ git config --global user.name 自定义用户名
$ git config --global user.email 自定义邮箱

生成SSH密钥

以下命令会生成两个文件id_rsaid_rsa.pub,分别是私钥和公钥。
- windows路径:C:\Users\用户名\.ssh(仅供参考,可以自定义路径,但不推荐这样做)
- mac路径:~/.ssh

$ ssh-keygen -t rsa -C "Github的注册邮箱地址"

需要把公钥添加到github中,这样做是为了实现电脑和github的免登录。

打开 https://github.com/settings/ssh

添加一个SSH-Key,把id_dsa.pub文件的内容拷贝到网页的Key文本框内,标题随便写。

创建项博客

下载博客源码:

$ hexo init blog  # blog为文件夹名字,本文以blog命名
$ cd blog         # 进入blog文件夹
$ npm install     # 安装依赖模块

项目结构

hexo的项目结构,*号的是需要注意的文件

.
├── _config.yml     # 站点配置文件 *
├── package.json    # 已安装的插件
├── scaffolds       # 模板文件夹
├── source          # 资源文件夹 *
|   ├── _drafts     # 草稿文件夹
|   └── _posts      # 放博文的文件夹 *
└── themes          # 放主题的文件夹 *

站点配置文件 _config.yml

配置站点的相关信息,包括编译后生成的静态博客页面提交到哪个github的分支上,还有选择主题。

资源文件夹 source

放一些页面信息,分类、草稿、博文等

博文文件夹 _posts

所有博文都会放到这里

主题文件夹 themes

主题包都放到这里,然后配置主题的相关配置,在主题文件夹里面也有一个\_config.yml文件,这个文件称为主题配置文件

创建远程仓库

在github创建一个空的仓库,要注意仓库的名称,必须是github的用户名.github.io,否则会出现404的情况

不需要勾选readme.md文件

如图所示


创建仓库

用git管理项目

初始化git:

$ git init                   # 初始化git
$ git remote add origin git@github.com:Evgni0n/evg.github.io.git      # 添加远程仓库地址

初始化master分支:

$ touch README.md            # 添加一个README.md文件
$ git add README.md          # 把README.md添加到git管理
$ git commit -m "commit"     # 提交到本地仓库
$ git push -u master         # 提交到远程仓库的master分支(这里只是提交readme.md文件)

提交完后,远程仓库就有一个README.md文件。然后去github上创建一个新的分支,命名为hexo(可以自定义,本文用hexo)

回到命令行,初始化hexo分支:

$ git checkout -b hexo       # 切换到hexo分支,没有hexo分支会创建
$ touch .gitignore           # 创建一个.gitignore
$ vim .gitinore              # 不会用vim的可以用别的编辑器打开

把下面的内容拷贝到.gitinore(如果已经有了可以直接跳过这里):

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

回到命令行,提交博客源码:

$ git add .
$ git commit -m "branch commit"
$ git push -u origin hexo         # 提交到hexo分支

完成上面的步骤,就已经把hexo的源码单独的放到hexo分支上了,master用来放编译后的静态网页。

如果直接运行hexo init会把仓库的.git文件删除,所以才需要绕这一大圈来解决这个问题,当然也可以用直接点的方式把hexo源码先放到别的地方再拷贝到本地仓库.

配置站点配置文件

打开站点配置文件使用,里面有很多内容。只需要用到其中一部分。

  • yml文件注意点

    1. “#”号是注释的意思。
    2. “:”后面必须跟一个空格,例如:title: Hexo
#Site
title: Hexo         # 网站的标题 自定义
subtitle:           # 副标题 自定义
description:        # 描述信息 自定义
author: John Doe    # 作者 自定义
language: zh-Hans   # 语言,是根据主题的,如果主题没特别说明就用它,等会要换主题。
timezone:           # 时区,这里不填就默认跟浏览器的

在最底部这里是部署的时候相关的信息

deploy:
  type: git
  repo: git@github.com:Evgni0n/evg.github.io    #必须是.io结尾,如果是.git的就要删掉.git不然会出现404
  branch: master    #部署博客的是时候会自动提交到master分支

写博客

$ hexo new 博客文章名字

会在/source/_post文件夹下生成md文件,使用Markdown编写博客。

部署博客

首次部署博客需要装一个插件,在Hexo 3.0版本后deploy git 被分开的

$ npm install hexo-deployer-git --save

部署博客:

$ hexo clean    # 没改主题文件可以不需要清除缓存
$ hexo g -d

修改完博客后记得上传源码

$ git checkout hexo
$ git add .
$ git commit -m "提交信息"
$ git push -u origin hexo

温馨提示

因为hexo下载代码的时候会删除仓库原来的.git所以才绕了一大圈。完成上面的配置后,可以执行下面的操作,当然可以不做。

上面的操作全部完成以后,本地会有2个分支(master和hexo),master分支是交给hexo管理的,我们并不需要,我们只要在博客修改完成后把博客源码提交到hexo分支,所依本地的master分支是多余的。最简单的做法就是直接把本地仓库删掉。

  1. 在github上把hexo分支设为默认分支(以后克隆、拉取、上传都不需要额外的命令)
  2. 删除本地仓库

执行以下命令

$ git clone 你的仓库ssh克隆地址    # 是你自己的仓库
$ npm install

这样做的好处:
1. master不需要你管理,也不会存在本地仓库造成不必要的麻烦
2. 提交源码直接使用:git push
3. 拉取源码直接使用:git pull
4. 克隆源码直接使用:git clone 仓库ssh克隆地址
如果你做了这一步,那么下面的所有命令都只需要和上面列出的4点一样的写法

hexo常用命令

$ hexo s                  # 本地调试,默认网址: localhost:4000 按ctrl+c可以退出调试状态
$ hexo s -w               # 本地调试,文件有更改会立刻重启调试状态
$ hexo new 博文名字        # 创建新的博客文章,会自动生成在 /source/_posts
$ hexo clean              # 清除缓存,更换主题必须先清除再部署
$ hexo g -d               # 部署博客,根据站点配置文件设置的github路径提交

更新本地博客源码

在别的电脑提交了源码之后,这台电脑的代码是过时的

$ git pull origin hexo

更换电脑写博客

如果新电脑没有安装环境就把上面的环境安装一次然后再执行下面的命令

$ cd 你需要的路径
$ git clone -b hexo git@github.com:Evgni0n/evg.github.io.git
$ npm install

删除博客文章或者其他文件注意

代码是交给git管理的,尽量不要手动删除文件

$ git rm "文件名.后缀"     # 删除文件
$ git rm -rf "文件夹名字"  # 递归删除文件夹
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值