关闭

Hexo博客搭建

标签: 博客
299人阅读 评论(0) 收藏 举报
分类:

本文将以Windows10环境来搭建hexo博客,并介绍hexo博客的相关设置以及优化。

部分linux命令请在git base里面执行。

环境搭建

安装git

git下载地址

默认安装,配置好默认的用户

$ git config --global user.name "you_name"
$ git config --global user.email you_email@example.com

安装node.js

node.js下载地址

默认安装即可

用zip安装时,配置两个环境变量:一个是PATH上增加node.exe的目录D:\nodejs,一个是增加环境变量NODE_PATH,值为D:\nodejs\node_modules。目录地址转换成你的。

安装Hexo

$ cd d:/hexo
$ npm install hexo-cli -g  #安装全局环境
$ hexo init blog #你的博客环境
$ cd blog
$ npm install    # NPM是随同NodeJS一起安装的包管理工具
$ hexo g         # 或者hexo generate
$ hexo s         # 或者hexo server,可以在http://localhost:4000 查看效果

如果由于管理员权限而失败,可以用win+x选择”命令提示符(管理员)“来操作

到这里你已经可以看到效果了http://localhost:4000

GitHub配置

(1)新建一个仓库,名字要和你用户名一样,例如:you_name.github.io ,GitHub会自动识别这次仓库为pages

(2)配置ssh秘钥,私钥自行保存,公钥放GitHub上

$ ssh-keygen -t rsa -C "your_email@youremail.com" #或者下面这个
$ ssh-keygen -t rsa -f sample                     #文件名命名为sample
-t 指定密钥类型,默认是 rsa ,可以省略。
-C 设置注释文字,比如邮箱。
-f 指定密钥文件存储文件名。

SSH 在push的时候,如果配置SSH key的时候设置了密码,则需要输入密码的,否则直接是不需要输入密码的

目录文件C:\ Users\youname\.ssh\id_rsa.pub为你的公钥,id_rsa为私钥。公钥里面的内容复制到GitHub设置里。

然后配置~/.ssh/config文件,按照实际情况删减。

host github.com
#  port 22
#  compression yes
#  hostname 192.168.0.1
  user git
  identityfile ~/.ssh/id_rsa

(3)初始化仓库,即是上传一个任意文件上去。新建完仓库后,GitHub上会有提示。

(4)部署到GitHub上

配置博客根目录的_config.yml文件,把GitHub仓库地址配置进去。

  deploy:
    type: git
    repo: git@github.com:loongX/loongX.github.io.git
    branch: master

这里要注意一下,yml文件以缩进来区分各个元素的,所以缩进要一致。

在部署到GitHub前先要安装一个hexo-deployer-git插件。
Hexo提供了hexo-deployer-git工具,可以帮助部署Hexo到很多平台

$ npm install hexo-deployer-git --save

在blog文件夹里

$ hexo g
$ hexo d  #部署到远程仓上。

这里会部署到GitHub上,打开你的pages网址可以看到内容了(类似这个loongX.github.io网址)。

这个部署上传的是public目录下的文件,public文件夹里面保存的是生成的静态文件。

Hexo 建设

hexo官方文档

目录结构

blog目录结构如下

.
├── _config.yml   #配置文件
├── package.json  #应用程序的信息
├── scaffolds     #模版文件夹
├── source        #资源文件夹是存放用户资源的地方
|   ├── _drafts   #草稿
|   └── _posts    #正文
└── themes        #主题文件夹

基础命令

$ hexo generate                # 简写:hexo g,生成静态文件,会在当前目录下生成一个public文件夹
$ hexo server                  # 简写:hexo s,启动本地服务,用于博客的预览
$ hexo deploy                  # 简写:hexo d,部署到远程(如GitHub,可以在_config.yml中配置)
$ hexo new post-name           # 简写:hexo n post-name, 新建文章 
$ hexo new page page-name      # 简写:hexo n page page-name,新建页面

$ hexo d -g                    # 生成和部署
$ hexo s -g                    # 生成和预览

$ hexo new draft <title>       # 新建草稿,存放在source/_drafts
$ hexo publish post <title>    # 发布草稿为文章,文章转移到source/_posts
$ hexo s -g --drafts           # 显示草稿

$ hexo new page tags           # 使用 Hexo 命令新建一个名为 tags 的页面

更换主题

$ hexo clean
$ git clone https://github.com/MOxFIVE/hexo-theme-yelee.git themes/yelee

然后修改Hexo目录下的_config.yml配置文件中的theme属性,将其设置为yelee。

添加插件

RSS 对应插件——feed插件https://github.com/hexojs/hexo-generator-feed

Sitemap for SEO 站点地图通用插件: hexo-generator-seo-friendly-sitemap

百度专用Sitemap: hexo-generator-baidu-sitemap

添加插件添加sitemap和feed插件

$ npm install hexo-generator-feed 
$ npm install hexo-generator-sitemap 
$ npm install hexo-generator-baidu-sitemap@0.1.1 --save

修改_config.yml,增加以下内容

Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
- hexo-generator-baidu-sitemap

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

#通用sitemap
sitemap:
 path: sitemap.xml

 #百度爬虫
baidusitemap:
path: baidusitemap.xml

配完之后,就可以访问http://loongx.github.io/atom.xmlhttp://loongx.github.io/sitemap.xml,发现这两个文件已经成功生成了。

绑定独立域名

先购买域名:

阿里云域名购买

godaddy域名购买

在你的域名注册提供商那里配置DNS解析

你可以解析到ip也可也解析到域名

CNAME — www —默认线路—loongx.githut.io

CNAME—-@—-默认线路 —–loongx.githut.io

进入source目录下,添加CNAME文件

$ cd source/
$ touch CNAME
$ echo "okloong.com" >> CNAME # 输入你的域名

如果你按照下面步骤做了,在coding上也同样做了一个pages的话,你可以把国内的访问引向coding,国外的访问引向GitHub。

CNAME — www —默认线路—okayloong.coding.me

CNAME—-@—-默认线路 —–okayloong.coding.me

CNAME — www —海外线路—loongx.githut.io

CNAME—-@—-海外线路 —–loongx.githut.io

写博客

hexo写博客是用markdown语法来写的,用具有markdown功能的软件会比较方便些,我这里用的是Typora,简单好用。

Yelee主题配置

yelee官方文档

大部分设置只要在主题下的_config.yml文件里配置就可以了,里面的注释说得很清楚了,官方文档也说得很详细。下面说一些特殊的。

标签、分类以及我的页面设置

1.标签云设置:
使用 Hexo 命令新建一个名为 tags 的页面即可

hexo new page tags

2.关于我页面

使用 Hexo 命令新建一个名为 about 的页面即可

hexo new page about

该页面内容在文件 \hexo\source\about\index.md 中修改

然后,将上面两个在下面配置中建立链接关系。

menu:
  主页: /
  所有文章: /archives/
  标签云: /tags/
  关于我: /about/

注意:

上面标签云设置,已经包含了tags和cataloges了,
如果你在使用hexo new page catalages创建一个catalages分类,会和about页面一样,只显示一个网页。12

写新的Blog

\freeshow.github.io\scaffolds下的post.md模板文件修改为如下:

---
title: {{ title }}
date: {{ date }}
tags:
categories:
---

当写文件时,就可以填写所属tags或categories了。
但是,tags和categories都会显示在 标签云 中.

Coding设置

Coding像GitHub一样也提供pages功能,配置方法和GitHub配置差不多。这里用Coding是因为,GitHub在国内访问是比较慢的,Coding在国内访问就比较快一点,而且也方便百度搜索引擎抓取。在设置dns时候,把国内访问的流量引向Coding上,国外线访问就引向GitHub上,这样就比较合理一点。

配置ssh秘钥

按照上面的给GitHub配置ssh秘钥的步骤同样给coding平台布置即可。

建立coding-pages

下面是创建一个「项目 Pages」的操作示例:

这里另外找一个test文件夹来测试就好了。

1.登录 Coding.net,创建一个项目,项目名称为:user_name.coding.me

2.在本地创建一个项目文件夹,添加一个测试用的 index.html 文件。

<html>
   <head>
     <title>My Coding Pages</title>
   </head>

   <body>
      <h1>Hello Coding!</h1>
   </body>
</html>

3.将项目文件夹初始化为 Git 版本库,提交 index.html 到版本库,并为项目添加远程仓库地址。

git init
git add index.html
git commit -m 'init'
git remote add origin  git@git.coding.net:{user_name}/{project_name}

请别忘记将上面代码中的远程仓库地址的 {user_name} 和 {project _name} 替换成你自己的个性后缀(Global Key)和项目地址。

4.在本地创建一个 coding-pages 分支,切换到该分支。

git checkout -b coding-pages

5.将 coding-pages 分支推送到 Coding.net。

git push origin coding-pages

6.在项目的「Pages 服务」设置中,选择部署来源为 coding-pages 分支,点击「保存」按钮。 稍等片刻即可完成部署并通过 {user_name}.coding.me/{project_name} 访问你的网站.

部署博客

在你的博客目录

在你博客根目录下的_config.yml文件里配置

deploy:
  type: git
  repo: 
     github: git@github.com:loongX/loongX.github.io.git,master
     coding: git@git.coding.net:OkayLoong/Okayloong.coding.me.git,coding-pages

部署到平台上:

hexo d -g

自定义域名

coding的普通用户不能自定域名,也就是说你刚刚注册到的账户是没有这个功能的,你需要补充完资料,升级账户才能用。升级账户后,在“pages服务”里添加进你的域名进去,并配置好dns解析就好了。

Hexo多电脑同步的方法

一般思路是,创建两个仓库,一个用来保存hexo源码,一个是用来保存生成的博客文件。为了源码的安全建议是把源码保存在一个私有仓内。这里我采用coding建立私有库。码云也提供私有库功能,方法类似。

说下这个两个仓库的结构:

Hexo-blog分支 – 用来保存所有Hexo的源文件

master分支 – 用来保存Hexo生成的博客文件

创建私有仓库

在coding平台上创建一个私有项目,名称为Hexo-blog,并初始化仓库(按照上面的要求上传一个任意文件上去,否则后面的操作会报错)。

上传时候需要把主题里面的.git文件夹删掉,要不然上传到私有库时候会漏掉主题部分的代码的。

但这个有个问题,你删后,原来主题的有更新就得不到及时更新了。

rm -fr ./themes/yelee/.git/   #删除主题里面的git
git init                     #建立本地的git仓库
git remote add origin git@git.coding.net:OkayLoong/hexo-blog.git  #添加远程仓,注意要添加ssh秘钥
git add .
git commit -m "my first private hexo"
git push -u origin master

但是如果你的主题改动比较大,更新反而很多冲突,那自己维护也行。不过这里有个取巧的办法。

主题刚下载还没同步到私有仓时候,把主题里面的.git文件夹删除掉,同步一下私有仓,然后撤销删除,把主题里面的.git文件夹还原回来。这时候,你两边的仓库都能更新了。

上传私有仓

git status                     #这个只是查看状态,可以不写
git add .                      #把整个文件夹添加进去
git commit -m "update"         #git规定一定要写,要不然上传不了
git push origin master         #简写 git push 

可以将上面的代码保存为deploy.sh,这样就不用每次都敲了。但注意不要用中文名。其实其他命令你也可以写成脚本来运行,比如拉取源码、更新博等。

拉取私有仓回本地

一般git pull就够了,但是如果有冲突可以按照下面的方式来解决,以远程仓库为标准代码覆盖原来的。

git fetch --all                  #将git上所有文件拉取到本地
git reset --hard origin/master   #强制将本地内容指向刚刚同步git云端内容
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

半小时教你使用hexo建立一个漂亮的个人博客

动机 前些天,自己刚刚接触hexo,并用hexo搭建了自己的博客,对hexo的强大搭建博客能力感到赞叹。用我的实际体验来说,你只要是有点计算机基础的人,完全可以轻松的使用hexo搭建起自己的博客。你要...
  • v123411739
  • v123411739
  • 2015-04-09 19:14
  • 25560

手把手教你用Hexo+Github 搭建属于自己的博客

大概可以分为以下几个步骤 搭建环境准备(包括node.js和git环境,gitHub账户的配置) 安装Hexo 配置Hexo 怎样将Hexo与github page 联系起来 怎样发布文章 主题 推...
  • gdutxiaoxu
  • gdutxiaoxu
  • 2016-12-11 22:04
  • 55438

可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

前言:博主目前大三,Web 前端爱好者。写博客的好处,不是为了写而写,而是一个记录思想的过程。不要考虑它能带给你什么,而是你自己从中收获了什么。最近刚好有空,于是就参照网上的各种教程,搭建了一个博客。...
  • QQ80583600
  • QQ80583600
  • 2017-06-01 09:12
  • 2960

我的Hexo博客建站日志

我的Hexo博客建站日志前言我是一枚安卓猿,js css以及基于Nodejs的Hexo对我来说完全是个新领域.由于之前查资料查到看到一个人的博客很不错MOxFIVE,于是就决定模仿人家的博客进行搭建自...
  • pvpheroszw
  • pvpheroszw
  • 2016-04-24 12:29
  • 1947

Mac下利用Hexo+GitHub搭建自己的博客

一、mac下利用hexo搭建一个博客,已有公司git账户 已有公司git账户,就用改配置文件的方式一,如果没有,可以用方式二。 因为git账户默认配置是global的,会相互覆盖,如果不觉得来回切换...
  • qianqianstd
  • qianqianstd
  • 2017-02-19 22:04
  • 1931

零基础免费搭建个人博客-hexo+github

使用hexo生成静态博客并架设在免费的github page平台
  • jzooo
  • jzooo
  • 2015-07-07 00:10
  • 36809

搭建自己的 github + hexo 博客

从零基础一步一步搭建 github + hexo 博客的方法,博客中 disqus 评论、七牛云图床的使用,以及自定义主题的方法。
  • u013830021
  • u013830021
  • 2017-06-06 06:40
  • 363

手把手教你使用Hexo + Github Pages搭建个人独立博客

本文原始链接:手把手教你使用Hexo + Github Pages搭建个人独立博客 作者:令狐葱 本文基于 知识共享署名-相同方式共享 4.0 国际许可协议发布,欢迎转载,演绎或用于商业目的,但是必...
  • lzrreach
  • lzrreach
  • 2016-10-19 22:00
  • 4620

如何搭建一个独立博客——简明Github Pages与Hexo教程

摘要:这是一篇很详尽的独立博客搭建教程,里面介绍了域名注册、DNS设置、github和Hexo设置等过程,这是我写得最长的一篇教程。我想将我搭建独立博客的过程在一篇文章中尽可能详细地写出来,希望能给后...
  • poem_of_sunshine
  • poem_of_sunshine
  • 2014-06-08 15:55
  • 69349

通过GitHub和Hexo来搭建自己的个人博客

搭建个人博客在我大学的时候建过一次,那时候是用新浪云和Wordpress搭建的,那时候新浪云服务是免费的,后来变收费,博客就没有了。之前便想着再弄个自己的博客出来,这几天就着手弄了起来。 看到很多人...
  • u011976726
  • u011976726
  • 2017-10-12 17:24
  • 557
    个人资料
    • 访问:36904次
    • 积分:683
    • 等级:
    • 排名:千里之外
    • 原创:31篇
    • 转载:1篇
    • 译文:0篇
    • 评论:6条
    最新评论