注册Github账号

这里我们就不多讲了,小伙伴们可以点击这里,进入官网进行注册。

创建仓库

图片来自Github

登录账号后,在Github页面的右上方选择New repository进行仓库的创建。

图片来自Github

在仓库名字输入框中输入:

Github昵称.github.io

然后点击Create repository即可。

生成添加秘钥

在终端(Terminal)输入:

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

一路Enter过来就好,待秘钥生成完毕,会得到两个文件id_rsaid_rsa.pub,用带格式的记事本打开id_rsa.pub,Ctrl + a复制里面的所有内容,然后进入https://github.com/settings/ssh:

图片来自Github

将复制的内容粘贴到Key的输入框,随便写好Title里面的内容,点击Add SSH key按钮即可。

安装node.js

点击进入node.js官网

图片来自node.js官网

目前node.js有两个推荐版本,分为通用版和最新版,点击可直接进行下载。下载好后,按照既定的套路安装即可。

安装git

这里说的git实则是为了使用git指令,我们的git使用一般有两种方式,一种是图形化界面(GUI),另一种是通过命令行,我们这里要使用的是后者,点击这里进入git的下载网站下载git的安装包。

图片来自git

有人说,Mac自带git指令;也有人说安装xcode就可以使用git指令。因本人已经忘记当初自己是如何安装git的,所以大家根据自己的实际情况做决定吧。

安装配置hexo

强调一下,这一步使我们搭建博客的核心,是重中之重。

图片来自hexo

有能力的同学可以选择进入官网自行查看hexo官方文档,愿意听我叨叨的同学可以继续往下看。

接下来我们的操作都将在Terminal终端进行:

  • 定位博客本地放置的路径
$ cd 文件夹

定位博客所在目录

强调:强烈建议不要 选择需要管理员权限才能创建文件(夹)的文件夹。

  • 下载安装hexo
$ npm install -g hexo-cli

安装好hexo以后,在终端输入:

$ hexo

若出现下图,说明hexo安装成功:

hexo安装成功

  • 初始化博客
// 建立一个博客文件夹,并初始化博客,<folder>为文件夹的名称,可以随便起名字
$ hexo init <folder>
// 进入博客文件夹,<folder>为文件夹的名称
$ cd <folder> // node.js的命令,根据博客既定的dependencies配置安装所有的依赖包 $ npm install

初始化博客以后,我们可以看到博客文件夹里的文件是这样的:

hexo博客文件夹

  • 配置博客

基于上一步,我们对博客修改相应的配置,我们用到_config.yml文件,下面是该文件的默认参数信息:

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/# Site
title: # The title of your website subtitle: # The subtitle of your website description: # The description of your website author: # Your name language: # The language of your website timezone: # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://yoursite.com/child root: / permalink: :year/:month/:day/:title/ permalink_defaults: # Directory source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: # Writing new_post_name: :title.md # File name of new posts default_layout: post titlecase: false # Transform title into titlecase external_link: true # Open external links in new tab filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight:  enable: true  line_number: true  auto_detect: false  tab_replace: # Category & Tag default_category: uncategorized category_map: tag_map: # Date / Time format ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination ## Set per_page to 0 to disable pagination per_page: 10 pagination_dir: page # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: landscape # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy:  type:

看到这里,大家千万别被一长串英文给吓到了,我们实际上要修改的配置只有几项,拿我自己的配置,我们继续往下看:

1. 修改网站相关信息

title: inerdstack
subtitle: the stack of it nerds
description: start from zero
author: inerdstack
language: zh-CN timezone: Asia/Shanghai

language和timezone都是有输入规范的,详细可参考语言规范和时区规范。

注意:每一项的填写,其:后面都要保留一个空格,下同。

2. 配置统一资源定位符(个人域名)

url: https://xxx.github.io/

对于root(根目录)、permalink(永久链接)、permalink_defaults(默认永久链接)等其他信息保持默认。

3. 配置部署

deploy:type: gitrepo: https://github.com/iNerdStack/inerdstack.github.io.git branch: master

其中repo项是之前Github上创建好的仓库的地址,可以通过如下图所示的方式得到:

图片来自Github

branch是项目的分支,我们默认用主分支master。

发表一篇文章

在终端输入:

// 新建一篇文章
hexo new "文章标题"

我们可以在本地博客文件夹source->_post文件夹下看到我们新建的markdown文件。

md文件

用Markdown编辑器打开文件,我们可以看到这样的内容:

md文件自动生成内容

我们写下:

你好,欢迎来到我的个人技术博客。

输入文章内容

保存后,我们进行本地发布:

$ hexo server

如下图:

本地发布博客

打开浏览器,输入:

http://localhost:4000/

我们可以在浏览器端看到我们搭建好的博客和发布的文章:

本地博客发布

当然,我们也可以手动添加Markdown文件在source->_deploy文件夹下:

手动添加markdown文件

其效果同样可以媲美hexo new <article>

本地发布效果图

但是毕竟我们目前发布的只有本机看得到,怎么让其他人看到我们写的博客呢?这时候我们来看看博客的部署。

我们只要在终端执行这样的命令即可:

$ hexo generate
$ hexo deploy
如果出现 error deployer not found:github 的错误,执行npm install hexo-deployer-git --save,再执行hexo deploy
 

这时候我们的博客已经部署到网上了,我们可以在浏览器地址输入栏输入我们的网址即可,如我的博客是:inerdstack.github.io。(我转的就不改了。)


更新20170310

  • 密钥生成文件的位置为:

    windows: C:/Users/用户名/.ssh/
    mac: ~/.ssh/
  • .ssh文件为隐藏文件,需要先设置隐藏文件可见才可以看到

  • npm install时,出现npm error: RPC failed错误
    将npm镜像修改为淘宝镜像,详细修改方式详见:http://blog.csdn.net/zhy421202048/article/details/53490247

更新20170312

  • Deployer not found: git
    在终端执行命令:

    npm install hexo-deployer-git --save

    然后继续执行hexo deploye指令进行部署。

转自:http://www.jianshu.com/p/e99ed60390a8

转载于:https://www.cnblogs.com/ziqian9206/p/7241928.html

转:20分钟教你使用hexo搭建github博客相关推荐

  1. hexo搭建Github博客上传后,网页显示404问题解决方案

    问题如标题所示,"hexo上传博客后,网页始终显示404,无法刷新网页".奋战几天查各种资料后问题终于得到解决,我感觉很有必要记录一下解决过程和解决方案,网页无法打开的原因真的很让 ...

  2. linux hexo使用教程,Linux下使用Hexo搭建github博客(示例代码)

    找到一篇靠谱的博客,备份一下: ---------以下原文------------------ Nodejs安装 因为hexo是基于nodejs的应用,所以要先安装nodejs才可以.我这里以Ubun ...

  3. 一行代码都不用写,教你如何快速搭建Github博客!!!

    关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! 转载自量子位 GitHub不仅可以传代码,还可以建博客.利用GitHub Page ...

  4. 用hexo搭建GitHub博客(+图床)

    图床 图床同样可以使用github只需要上传图片到仓库,然后通过https://raw.githubusercontent.com/xfx98/仓库名/分支名/文件路径名 的方式访问图片如https: ...

  5. hexo搭建个人博客_hexo 搭建个人博客

    hexo 搭建个人博客 hexo-theme-matery README Hexo BLOG 地址 iyuhp's blog 基本介绍 本 blog 使用 HEXO 搭建, MATERY 作为主题, ...

  6. 手把手教你使用 VuePress 搭建个人博客

    手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vu ...

  7. GitHub Pages + Hexo搭建个人博客网站,史上最全教程

    文章目录 一.准备工作 1. GitHub账号 2. 安装Git 3. 安装NodeJS 二.创建仓库 三.安装Hexo 四.更换主题 1. NexT 主题 2. Fluid主题 五.创建文章 六.个 ...

  8. Hexo搭建Github-Pages博客填坑教程

    目录: 1.安装Hexo 2.部署Hexo 3.Hexo命令 4.一些报错处理 5.博客管理 6.插件(RSS.Sitemap) 7.评论设置 8.404页面 9.统计 10.更新 11.总结 12. ...

  9. Linux下使用 github+hexo 搭建个人博客04-next主题优化

    上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功 ...

最新文章

  1. mysql plsql 循环_PL/SQL for...loop循环语句
  2. 【Java 虚拟机原理】Class 字节码二进制文件分析 一 ( 字节码文件附加信息 | 魔数 | 次版本号 | 主版本号 | 常量池个数 )
  3. Adobe Acrobat 9.0“ PDFMaker无法找到Adobe PDF Printer 的打印驱动程序”解决办法
  4. SpringSecurity分布式整合之common工具模块创建
  5. 靠能力赚大钱,是最最可笑的谎言
  6. 一天干掉一只Monkey计划(一)——基本光照模型及RT后处理 【转】
  7. java设置随机数教程
  8. 搞清楚模数、数模转换中的AGND和DGND
  9. 实验四——反汇编工具的使用
  10. 【英语四六级-必背单词】高中英语单词 (G)-MP3试听与下载
  11. POJ 4001 xiangqi(模拟)
  12. 鼠标右键反应慢的可能原因
  13. html那个代码看不到内容,IE浏览器 查看不了HTML源代码的问题解决!
  14. 关于TR1900错误的一些解决方法(引用冯哥)
  15. 幼儿交往能力培养的调查研究
  16. jar包冲突的解决,依赖树的打印与分析
  17. 下载追踪:如何监测APP的来源渠道数据
  18. PXI标准– PXI规范更新总结
  19. 记录:解决firefox不同电脑上不能同步的问题
  20. uniapp 微信小程序 api上传图片 binary (form Data)

热门文章

  1. python求50的阶乘_python中求阶乘
  2. bootstrap 输入错误提示_win7系统提示explorer.exe应用程序错误怎么办
  3. (组合数求模=乘法逆元+快速幂) Problem Makes Problem
  4. linux+虚拟机上的wdcp,linux虚拟主机服务器wdcp系统教程
  5. linux ipset 流量,linux中ipset命令的使用方法详解
  6. k8s挂载目录_K8S中挂载目录引发的血案!
  7. java 文件名空格,java关于文件名带有空格的个人见解
  8. android安全性发展,Android未来发展 安全是重点
  9. 计算机科学与应用考研题,2015年中科院计算机科学综合考研真题
  10. 正则表达式的匹配规则