3min快速使用Hexo+GitHub搭建免费博客

准备工作

至于为什么使用Hexo,而不使用Jekyll,网上已经做了一些比较,这里就不在赘述。

由于是免费博客,本篇文章暂不涉及域名申请。

在开始之前,已有的资源包括:

  1. 申请GitHub账户
  2. 安装Node.js
  3. 安装Git

环境检测

输入以下命令有返回版本号,说明Node.js环境配置正确:

1 node -v
2 npm -v

安装Hexo

首先在D盘符下建立hexo文件夹,配置完成后博客资源存放路径:

D:\hexo\blog

依次输入以下命令:

1 cd D:/hexo
2 npm install hexo-cli -g
3 hexo init blog
4 cd blog
5 npm install
6 hexo g #或者hexo generate
7 hexo s #或者hexo server,可以在http://localhost:4000查看

常见命令:

1 $ hexo new "postName"      #新建文章
2 $ hexo new page "pageName" #新建页面
3 $ hexo generate            #生成静态页面至当前目录下的public目录
4 $ hexo server              #启动本地web服务,用于博客的预览,开启预览访问端口(默认端口4000,‘ctrl + c‘关闭server)
5 $ hexo deploy              #部署博客到GitHub
6 $ hexo help                #查看帮助
7 $ hexo version             #查看Hexo的版本

缩写:

1 $ hexo n == hexo new
2 $ hexo g == hexo generate
3 $ hexo s == hexo server
4 $ hexo d == hexo deploy

组合命令::

1 $ hexo s -g #生成并本地预览
2 $ hexo d -g #生成并上传

打开http://localhost:4000已经可以看到一篇内置的blog。

Hexo主题配置

以主题yilia为例进行说明。

安装主题

1 $ hexo clean
2 $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

这是官方主题,其他主题还有:

1 git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

修改hexo目录下的_config.yml配置文件中的theme属性,将其设置为yilia,然后重新执行hexo g来重新生成。

如果出现一些莫名其妙的问题,可以先执行hexo clean来清理一下public的内容,然后再来重新生成和发布。

更新主题

1 $ cd themes/yilia
2 $ git pull
3 $ hexo g # 生成
4 $ hexo s # 启动本地web服务器

部署Hexo到Github Pages

首先在Github上创建特别的repository,命名为yourname.github.io,yourname改成你自己取的名字。

部署到github的原理:

  1. 之前步骤中在Github上创建的那个特别的repo,一个最大的特点就是其master中的html静态文件,可以通过链接http://yourname.github.io来直接访问。
  2. hexo -g 会生成一个静态网站(第一次会生成一个public目录),这个静态文件可以直接访问。
  3. 需要将hexo生成的静态网站,提交(git commit)到github上。

使用hexo deploy部署

部署到github,需要在blog根目录下的站点配置文件_config.xml中作如下修改:

1 deploy:
2   type: git
3   repo: [email protected]:yourname/yourname.github.io.git
4   branch: master

就是给hexo d 这个命令做相应的配置,让hexo知道要把blog部署在哪个位置。

最后安装Git部署插件,输入命令:

$ npm install hexo-deployer-git --save

这时,分别输入三条命令:

1 hexo clean
2 hexo g
3 hexo d

你会发现你的博客已经上线,可以在网络上被访问了。

发布文章

定位到blog根目录,正式发布上线博客文章,在命令行中输入:

$ hexo n "postName" #新建文章

发现在blog根目录下的source文件夹中的_post文件夹中多了一个postName.md文件,使用Markdown(锤子科技锤子便签教程不错)编辑器打开,就可以开始你的个人博客之旅了。

通过带有预览样式的Markdown编辑器实时预览书写的博文样式,也可以通过命令:

$ hexo s --debug 

在本地浏览器的http://localhost:4000预览博文效果。

默认情况下,生成的博文目录会显示全部的文章内容,如何设置文章摘要的长度呢?答案是在合适的位置加上<!--more-->即可。

写好博文并且样式无误后,通过以下命令:

1 $ hexo g
2 $ hexo d

生成、部署网页,然后随后可以在浏览器中输入域名浏览。

网站具体配置参看官方文档

保留CNAME、README.md等文件

提交之后网页上一看,发现以前其它代码都没了,此时不要慌,一些非md文件可以放到source文件夹下,这里的所有文件都会原样复制(除了md文件)到public目录。

由于hexo默认会把所有md文件都转换成html,包括README.md,所有需要每次生成之后、上传之前,手动将README.md复制到public目录,并删除README.html。

寻找图床

图床,当博文中有图片时,若是少量图片,可以直接把图片存放在source文件夹中,但这显然不合理的,因为图片会占据大量的存储的空间,加载的时候相对缓慢 ,这时考虑把博文里的图片上传到某一网站,然后获得外部链接,使用Markdown语法,![图片信息](外部链接) 完成图片的插入,这种网站就被成为图床。常见的简易的图床网站有:贴图库图片,国内算比较好的图床有两个:新浪微博和 七牛云

参考:

[1] https://zhuanlan.zhihu.com/p/26625249

[2] https://div.io/topic/1691

[3] https://github.com/limedroid/HexoLearning

[4] http://blog.haoji.me/build-blog-website-by-hexo-github.html?from=xa

原文地址:https://www.cnblogs.com/longlively/p/9165245.html

时间: 2024-10-07 04:34:44

3min快速使用Hexo+GitHub搭建免费博客的相关文章

《Hexo+github搭建个人博客》

<Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+github搭建个人博客>1 思维导图总览:2 What?2 简介:2 Hexo:2 NodeJs2 Github4 Git5 Github page:5 Markdown6 How?7 环境配置:7 安装Git8 安装Node.js9 安装hexo13 第一步:打开cmd.13 第二步:进入NodeJS

使用Node.js+Hexo+Github搭建个人博客(续)

一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在上篇博文的基础上分别从以下几个方面做简单的后续介绍: 博客相关配置介绍 博客主题 Yilia 配置介绍 如何制作并配置网站缩略图 如何将博客同步到 Github.Coding 中 如何使用 Git 同步 Github 与 Coding 的代码 如何申请域名并作域名解析 如何将域名绑定至 Github.Codi

使用hexo+GitHub搭建个人博客的心得(含教程)

Author Email Yaoyao Liu [email protected] 前言 对于广大CS专业的学生和码农,找一个地方写博客,记录一些编程.配置环境.阅读论文的心得体会是一个很常见的习惯.当然想搭建个人博客,就需要找个靠谱的平台,主要就是以下的两种方式: 使用网站提供的博客平台,例如国内的CSDN.博客园:国外的Blogger.Wordpress 自己建站,发布到自己的服务器上,或者发布到GitHub.GitLab.Bitbucket等支持静态网页发布的git平台 针对于第一种方式,

hexo+github搭建个人博客

写在前边:Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 1.安装git[因为我们写好的博客受与github相关联,在本地可以运行后,还要通过git相关工具自动化部署到github,所以git必须有] 2.安装node[hexo的服务器是基于node的] 3.安装hexo   全局输入npm install hexo-cli -g 4.申请github账号 5.新建一个文件夹      我在e盘下

windows下hexo+github搭建个人博客

网上利用hexo搭建博客的教程非常多,大部分内容都大同小异,选择一篇合适的参考,跟着一步一步来即可. 但是,很多博客由于发布时间较为久远等问题,其中某些操作在现在已不再适用,从而导致类似于我这样的小白在搭建过程中困难重重. 因此在我这第一篇博客中,主要记录我搭建时参考的两篇博客中出现问题的地方(网上很多的博客都会导致这些问题,因此如果你在搭建过程中遇到困难的话,不妨来这里找一下答案) 参考的两篇博客 这里附上两篇博客的链接: windows下Hexo博客搭建过程 关于HEXO安装失败的解决方法

Ubuntu+Hexo+Github搭建个人博客

目录 目录 目录 1. 简介 环境 2. Git安装及配置 2.1 安装Git 2.2 创建Git仓库 2.3 配置git仓库 2.4 添加公钥 3. Node安装 4. Hexo安装及配置 4.1 安装hexo 4.2 初始化hexo文件夹 4.3 Hexo操作 4.4 将git库和hexo链接起来 5. 更换主题 6. 博客迁移 6.1 常规迁移 6.2 特殊情况 1. 简介 以前部署的Hexo博客是在Windows上搭建的,在Windows系统使用很方便,碰到一些问题也都能够解决:现在安装

hexo+github 搭建的博客重做系统以后如何重新配置

重做电脑系统以后 1. 安装 git  node  2.在桌面右键启动git 然后安装hexo $ npm install -g hexo-cli 3.接着在文件夹里右键git,去测试本地是否能预览: (有问题的话去http://www.paopaoche.net/jiaocheng/85988.html) 4.本地ok的话就去重新配置钥匙,去github 删除之前的,然后添加新的, 参考这里:https://segmentfault.com/a/1190000004947261 5.然后验证邮

Hexo + Github 搭建个人博客网站

参考这两篇文章 https://chujunwen.xyz/posts/c41c188d/ 图文 https://www.cnblogs.com/fengxiongZz/p/7707219.html https://blog.csdn.net/weixin_30472035/article/details/98930302 原文地址:https://www.cnblogs.com/ahacker15/p/12219418.html

使用hexo和github搭建个人博客网站

使用hexo+github可以免费.快速地搭建一个静态博客网站,并且使用hexo提供的命令以及git自身的功能可以很便捷地管理博客. 使用github部署静态页面 在了解hexo之前,我们先看看如何使用github部署静态页面. 注册github账号 访问github官网注册一个账号,该流程和一般网站注册账号一样,在此不赘述. 创建一个git仓库 其他项如果需要可以自主填写,这里只填写仓库名,点击Create repository创建仓库. 提交一个测试页面 执行git clone命令将仓库克隆