我用Hexo在GitHub上搭建好了自己的博客,我的这第一篇博客就来说说搭建的过程。

1 环境配置

本文使用环境如下:

  • Windows 10
  • node.js v8.1.3
  • git v2.13.2
  • npm v5.0.3
  • hexo v3.3.7

1.1 node.js安装

可以去Nodejs官网下载,如果下载速度不行,可以去Nodejs中文网下载。下载完后直接运行安装即可,会默认把nodejs加入环境变量中,可以通过node -v查看是否安装成功。新版本nodejs已经集成了npm,同样使用npm -v来查看是否安装成功。

1.2 git安装

地址:git for windows

2 搭建github博客

2.1 建立仓库

在Github上新建一个YourUserName.github.io的仓库,比如我的是Jomsou.github.io

2.2 绑定域名

绑定域名我还没弄,有兴趣的朋友可以自行搜索下如何弄。

3 配置SSHKey

从本地提交修改的代码到Github需要权限,使用SSHKey连接Github。

ssh-keygen -t rsa -C "邮件地址"

然后回车确定,会在User\Username\.ssh目录下生成一个id_rsa.pub公钥,将里面的内容复制,打开github个人主页,进入Settings->SSH and GPG keys->New SSH key:



将复制的内容粘贴到key里,title随意。

4 使用hexo写博客

4.1 安装

npm install -g hexo

新建一个存放工程的文件夹,如D:\Documents\hexo,然后进入该目录,初始化hexo。

 hexo init
hexo g # 生成
hexo s # 启动服务

启动服务成功后,打开浏览器访问 https://localhost:4000 即可看到内容。

4.2 修改主题

默认主题比较丑,首先修改主题,我使用的主题是hexo-theme-yilia。首先下载主题:

git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

主题会下载到\hexo\themes文件夹下,修改根目录下_config.yml文件。将其中中的theme: landscape改为theme: yilia,然后重新执行hexo g来重新生成,使用hexo s来查看修改效果。

4.3 上传到github

在_config.yml文件中,将下面内容中的用户名改为自己的用户名即可。

deploy:
type: git
repository: git@github.com:Jomsou/Jomsou.github.io.git
branch: master

执行hexo d如果报如下错误:

npm install hexo-deployer-git --save

4.4 主题常见问题

常见问题在issues中可以找到解决方案。下面列出自己碰到的问题。

4.4.1 头像设置出错

修改layout/_partial/left-col.ejs的第六行为:

<img src="<%=theme.avatar%>" class="js-avatar show">

4.4.2 点击所有文章出错



按照如图配置还是出错,原因:插件与Nodejs版本不兼容,我的解决方法:

npm i -S hexo-generator-json-content@2.2.0

4.5 写博客

进入hexo根目录,执行

hexo new '博客名字'

hexo会在_posts下生成相关md文件。打开这个文件就可以开始写博客了。默认情况下,生成的博文目录会显示全部的文章内容。设置文章摘要的长度,在合适的位置加上<!--more-->即可。

5 参考

https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html

用Hexo在GitHub上搭建个人博客的更多相关文章

  1. 使用Hexo在github上搭建个人博客

    最近正好在学习前端开发,想着搭建一个属于自己的个人博客,把自己的技能树整理整理,温故而知新. 如果你有前端开发经验,那么搭建这样的博客就很简单了. 一 什么是Hexo     Hexo 是一个快速.简 ...

  2. hexo在git上搭建个人博客

    公司实习第一天接到的任务是:搭建一个基于Nodejs的开源项目的开发环境,接到任务时以为不是很困难,后来才知道该项目已于去年被废弃,搭配环境的时候遇到了不少问题,折腾了两天还是没有最终完成... 不过 ...

  3. HEXO与Github.io搭建个人博客

    HEXO与Github.io搭建个人博客 HEXO搭建    HEXO是基于Node.JS的一款简单快速的博客框架,能够支持多线程,支持markdown,可以将生成的静态网页发布到github.io以 ...

  4. 在github上搭建个人博客并在线更新

    换博客比更博还勤的我终于决定写一篇博客搭建教程了.. FAQ Q:\(hexo\)需要本地编译.\(jekyll\)虽然可以直接上传\(md\)..但是如果在github上直接编译也太难受了叭,毕竟不 ...

  5. Github上搭建个人博客记录

    1.注册,用户名一定要起好,别随便起. 2.登录后,新建一个仓库repositories.new一个. 命名为用户名.github.io.如果发现不一样进Settings修改,rename. 3.仓库 ...

  6. HEXO+Git+Github+域名搭建个人博客

    搭建个人博客可以分为以下五个部分 一.搭建本地环境(个人为Win10) 1.安装Git,下载地址:点击 下载后,按提示进行安装即可,作用是:把本地的内容提交到github上去 注意:官网下载速度不是很 ...

  7. 在github上搭建个人博客

    1.平台注册账号,新建域名 github(源码托管服务站):https://github.com/到GitHub官网,注册自己的账号,填好用户名,密码,邮箱,并完成邮箱验证就可以啦!默认的域名是htt ...

  8. 使用Jekyll在Github上搭建个人博客 - 环境搭建

    本地安装Jekyll 首先安装Ruby及gem Ruby的安装 Ruby官网进行下载 从RubyInstaller下载ruby [新手推荐] 我采用的是RubyInstaller,无脑简单 勾选时我配 ...

  9. 基于 Hexo + GitHub Pages 搭建个人博客(一)

    前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...

随机推荐

  1. day3_元组

    元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 一.创建元组 1.普通创建 实例1: >> ...

  2. 【python基础】利用pandas处理Excel数据

    参考:https://www.cnblogs.com/liulinghua90/p/9935642.html 一.安装第三方库xlrd和pandas 1:pandas依赖处理Excel的xlrd模块, ...

  3. pyqt5_eric6_Qt desinger

    麦子学院视频教程day1 1.创建pushbutton 绑定信号和槽 Ui_mainWindow.py 1 from PyQt5 import QtCore, QtGui, QtWidgets cla ...

  4. Ext.app.Application

    代表性的ExtJS应用程序,通常是用Ext.container.Viewport创建的经典的单页面应用程序. 一个程序由一个或多个视图(View)组成.视图的行为表现由它对应的视图控制器(Ext.ap ...

  5. 【Python】【面试必看】Python笔试题

    前言 现在面试测试岗位,一般会要求熟悉一门语言(python/java),为了考验求职者的基本功,一般会出 2 个笔试题,这些题目一般不难,主要考察基本功.要是给你一台电脑,在编辑器里面边写边调试,没 ...

  6. java执行字符串数学表达式【记录】

    https://stackoverflow.com/questions/3422673/evaluating-a-math-expression-given-in-string-form 1. goo ...

  7. 【叶问】 MySQL常用的sql调优手段或工具有哪些

     MySQL常用的sql调优手段或工具有哪些1.根据执行计划优化   通常使用desc或explain,另外可以添加format=json来输出更详细的json格式的执行计划,主要注意点如下:     ...

  8. MongoDB的客户端管理工具--nosqlbooster 连接MongoDB服务器

    nosqlbooster的官网地址为https://nosqlbooster.com.大家如果想直接下载,可以登入下载网址https://nosqlbooster.com/downloads. 下载w ...

  9. SectionList的使用

    这个是效果: 第一步:准备数据源:Car.json {"data": [ { "cars": [ { "icon": "m_180 ...

  10. equals和contains的区别

    equals只能判断两个变量的值是否相等.contains常用与集合中判断某个对象是否含有这个元素equals是需要两个对象完全相同才会返回true,而contains是要循环遍历容器里的所有内容后判 ...