转:20分钟教你使用hexo搭建github博客


注册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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/572172.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Maven入门详解与安装配置

Maven&#xff1a; Maven出现前的问题&#xff1a; 假设你现在做了一个项目&#xff0c;项目中肯定要用到一些jar包&#xff0c;比如说mybatis&#xff0c;log4j&#xff0c;JUnit等&#xff0c;除了这些之外&#xff0c;你有可能用到你的同事开发的其他的东西&#xff0c;比如…

Vue生命周期与自定义组件

自定义组件&#xff1a; Element 组件其实就是自定义的标签。例如<el-button> 就是对<button>的封装。 本质上&#xff0c;组件是带有一个名字且可复用的 Vue 实例&#xff0c;完全可以自己定义。 定义格式&#xff1a; Vue.component(组件名称, {props:组件的属性…

Spring DI(依赖注入)

DI依赖注入 IoC&#xff08;Inversion Of Control&#xff09;控制翻转&#xff0c;Spring反向控制应用程序所需要使用的外部资源DI&#xff08;Dependency Injection&#xff09;依赖注入&#xff0c;应用程序运行依赖的资源由Spring为其提供&#xff0c;资源进入应用程序的方…

Spring注解开发入门教程

注解开发&#xff1a; 什么是驱动注解&#xff1f; 注解启动时使用注解的形式替代xml配置&#xff0c;将繁杂的spring配置文件从工程中彻底消除掉&#xff0c;简化书写 注解驱动的弊端 为了达成注解驱动的目的&#xff0c;可能会将原先很简单的书写&#xff0c;变的更加复杂XM…

Spring整合Mybatis和JUnit

Spring整合Mybatis&#xff1a; 注解整合MyBatis分析 业务类使用注解形式声明bean&#xff0c;属性采用注解注入建立独立的配置管理类&#xff0c;分类管理外部资源&#xff0c;根据功能进行分类&#xff0c;并提供对应的方法获取bean使用注解形式启动bean扫描&#xff0c;加载…

Java-NIO(三):直接缓冲区与非直接缓冲区

直接缓冲区与非直接缓冲区的概念&#xff1a;1&#xff09;非直接缓冲区&#xff1a;通过 static ByteBuffer allocate(int capacity) 创建的缓冲区&#xff0c;在JVM中内存中创建&#xff0c;在每次调用基础操作系统的一个本机IO之前或者之后&#xff0c;虚拟机都会将缓冲区的…

Spring IOC扫描器与注册器

核心接口&#xff1a; 组件扫描器&#xff1a; 开发过程中&#xff0c;需要根据需求加载必要的bean&#xff0c;排除指定bean 设定组件扫描加载过滤器&#xff1a; 名称&#xff1a;ComponentScan 类型&#xff1a;类注解 位置&#xff1a;类定义上方 作用&#xff1a;设置…

Spring AOP切入点与通知XML类型

AOP&#xff1a; AOP(Aspect Oriented Programing)面向切面编程&#xff0c;一种编程范式&#xff0c;隶属于软工范畴&#xff0c;指导开发者如何组织程序结构AOP弥补了OOP的不足&#xff0c;基于OOP基础之上进行横向开发 uOOP规定程序开发以类为主体模型&#xff0c;一切围绕对…

给iOS项目中添加图片,并通过UIImageView引用和显示该UIImage图片

【问题】 关于iOS/iPhone中的文件选择对话框&#xff0c;用于用户去选择图片等文件 过程中&#xff0c;问题转换为&#xff0c;需要给当前iOS项目中&#xff0c;添加一个图片。 类似于Windows开发中的资源文件&#xff0c;其中图片文件属于资源的一种。 并且&#xff0c;接着可…

AOP底层原理与注解配置详解

注解开发AOP制作步骤&#xff1a; 在XML格式基础上 导入坐标&#xff08;伴随spring-context坐标导入已经依赖导入完成开启AOP注解支持配置切面Aspect定义专用的切入点方法&#xff0c;并配置切入点Pointcut为通知方法配置通知类型及对应切入点Before 注解开发AOP注意事项&am…

MacOS Apple M1 安装ARM架构的JDK及动态切换版本

JDK下载安装&#xff1a; 咱就是说&#xff0c;ARM版本的JDK就是一个字&#xff0c;真特么快&#xff0c;想变快吗&#xff0c;赶紧下载叭&#xff01;&#xff01; 1、下载地址&#xff1a;https://www.azul.com/downloads/?packagejdk 筛选一下MacOS下ARM架构的JDK版本&…

梯度下降和EM算法,kmeans的em推导

I. 牛顿迭代法给定一个复杂的非线性函数f(x)&#xff0c;希望求它的最小值&#xff0c;我们一般可以这样做&#xff0c;假定它足够光滑&#xff0c;那么它的最小值也就是它的极小值点&#xff0c;满足f′(x0)0&#xff0c;然后可以转化为求方程f′(x)0的根了。非线性方程的根我…

Spring事务详解与使用

Spring事务核心对象 J2EE开发使用分层设计的思想进行&#xff0c;对于简单的业务层转调数据层的单一操作&#xff0c;事务开启在业务层或者数据层并无太大差别&#xff0c;当业务中包含多个数据层的调用时&#xff0c;需要在业务层开启事务&#xff0c;对数据层中多个操作进行组…

黑马程序员博学谷Java就业班课程

1、资料全无加密&#xff0c;可任意试看 2、内容包括课程资料 地址:https://www.boxuegu.com/class/outline-1112.html

设计模式一の设计模式详解

一、设计模式定义 设计模式&#xff08;Design Pattern&#xff09;是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。使用设计模式的目的&#xff1a;为了代码可重用性、让代码更容易被他人理解、保证代码可靠性。 设计模式使代码编写真正工程化&#xff1b;…

Spring模板对象

Spring模块对象: 把共性的方法抽取出来固定为一个模板&#xff0c;后续再操作只需要填充内容即可。 比如&#xff1a;淘宝每次买东西都要填写地址&#xff0c;只是每次买的东西不一样&#xff0c;所以可以做一个默认地址&#xff0c;每次买东西都要去选商品就行了&#xff0c;不…

SpringMVC入门案例

SpringMVC 概述&#xff1a; SpringMVC是一种基于Java实现MVC模型的轻量级Web框架 三层架构 表现层&#xff1a;负责数据展示业务层&#xff1a;负责业务处理数据层&#xff1a;负责数据操作 MVC&#xff08;Model View Controller&#xff09;&#xff1a;一种用于设计创建…

SpringMVC请求中的普通、POJO、数组集合类型传参与类转换器

SpringMVC将传递的参数封装到处理器方法的形参中&#xff0c;达到快速访问参数的目的。 普通类型参数传参 参数名与处理器方法形参名保持一致 访问URL&#xff1a; http://localhost/requestParam1?nameitzhuzhu&age14 RequestMapping("/requestParam1")publi…

SpringMVC-HandlerInterceptor拦截器的使用与参数详解

拦截器概念&#xff1a; 拦截器&#xff08; Interceptor&#xff09;是一种动态拦截方法调用的机制&#xff0c;请求处理过程解析核心原理&#xff1a; AOP思想拦截器链&#xff1a;多个拦截器按照一定的顺序&#xff0c;对原始被调用功能进行增强 作用&#xff1a; 在指定的…

使用FindBugs-IDEA插件找到代码中潜在的问题

另一篇使用文档&#xff0c;参照&#xff1a;https://www.cnblogs.com/huaxingtianxia/p/6703315.html 我们通常都会在APP上线之后,发现各种错误,尤其是空指针异常,这些错误对于用户体验来说是非常不好的,但其实大部分的问题,我们都能够提前发现. 在编写代码的过程中,可能不会时…