`
wangyanlong0107
  • 浏览: 499795 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

【转】手把手教你建github技术博客

 
阅读更多

http://www.jianshu.com/p/701b1095da11

适合人群

  • 喜欢写Blog的人
  • 有一定的编程基础
  • 爱折腾的人
  • 熟练使用版本控制Git
  • 了解使用Github
  • 熟悉基本的MarkDown语法

环境准备

安装Git

下载 msysgit 并执行即可完成安装。

安装Node.js

在 Windows 环境下安装 Node.js 非常简单,仅须下载安装文件并执行即可完成安装。

安装hexo

利用 npm 命令即可安装。(在任意位置点击鼠标右键,选择Git bash)

npm install -g hexo

问题

  • npm ERR! registry error parsing json 错误

可能需要设置npm代理,执行命令

npm config set registry http://registry.cnpmjs.org
  • hexo:command not found
    删除刚刚安装的npm目录,重新执行命令npm install -g hexo安装hexo,

创建hexo文件夹

安装完成后,在你喜爱的文件夹下(如H:\hexo),执行以下指令(在H:\hexo内点击鼠标右键,选择Git bash),Hexo 即会自动在目标文件夹建立网站所需要的所有文件。

hexo init

安装依赖包

npm install

本地查看

现在我们已经搭建起本地的hexo博客了,执行以下命令(在H:\hexo),然后到浏览器输入localhost:4000看看。

hexo generate
hexo server

好了,至此,本地博客已经搭建起来了,只是本地哦,别人看不到的。下面,我们要部署到Github。

问题

  • 执行hexo server提示找不到该指令
    解决办法:
    在Hexo 3.0 后server被单独出来了,需要安装server,安装的命令如下:
    npm install hexo -server --save
    安装此server后再试,问题解决

github 创建博客

  • 注册账号

    地址:https://github.com/
    输入账号、邮箱、密码,然后点击注册按钮.

    1

创建页面仓库

这个仓库的名字需要和你的账号对应,格式: yourname.github.io
输入基本信息,然后点击创建仓库.


2

3


注意
命名规则:你的github账号.github.io,我这里被坑了,之前是jekell写的,现在换成hexo,所以我是另建创库了。

生成SSH密钥

ssh-keygen -t rsa -C "你的邮箱地址",按3个回车,密码为空。

在C:\Users\Administrator.ssh下,得到两个文件id_rsa和id_rsa.pub。

在GitHub上添加SSH密钥

打开id_rsa.pub,复制全文。https://github.com/settings/ssh ,Add SSH key,粘贴进去。

hexo使用

目录结构

.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json

全局配置 _config.yml

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site #站点信息
title:  #标题
subtitle:  #副标题
description:  #站点描述,给搜索引擎看的
author:  #作者
email:  #电子邮箱
language: zh-CN #语言
# URL #链接格式
url:  #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
  enable: true #是否启用
  line_number: true #显示行号
  tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数,设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论,替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件,例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署,将 lmintlcx 改成用户名
deploy:
  type: git
  repo: 刚刚github创库地址.git
  branch: master

注意

  • 配置文件的冒号“:”后面有一个空格
  • repo: 刚刚github创库地址.git

hexo命令行使用

常用命令:

hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页,可以在 public 目录查看整个网站的文件
hexo server #本地预览,'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存,**强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹**

简写:

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

编辑文章

新建文章

hexo new "标题"

在 _posts 目录下会生成文件标题.md

title: Hello World
date: 2015-07-30 07:56:29 #发表日期,一般不改动
categories: hexo #文章文类
tags: [hexo,github] #文章标签,多于一项时用这种格式
---
正文,使用Markdown语法书写

编辑完后保存,hexo server 预览

hexo部署

执行下列指令即可完成部署。

hexo generate
hexo deploy

以下提示说明部署成功

[info] Deploy done: git

点击 Github 上项目的 Settings,GitHub Pages,提示Your site is published at http://wuxiaolong.me (这是我买的域名)

图床

1.墙裂推荐七牛云储存,注册地址

2.七牛云储存提供10G的免费空间,以及每月10G的流量.存放个人博客图片最好不过了

3.七牛云储存还有各种图形处理功能、缩略图、视频存放速度也给力(非打广告)。

具体使用见使用七牛作为github博客的图床

域名

将独立域名与GitHub Pages的空间绑定

方法一:在站点source目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,比如wuxiaolong.me
方法二:在Repository的根目录下面,新建一个名为CNAME的文本文件,里面写入你要绑定的域名,比如wuxiaolong.me

DNS设置

DNSpod,快,免费,稳定。
注册DNSpod,添加域名,如下图设置。


其中A的两条记录指向的ip地址是github Pages的提供的ip
如何知道你的github上项目的IP,如下:

去Godaddy修改DNS地址

更改godaddy的Nameservers为DNSpod的NameServers。

总结

之前用的jekell写的,手把手教你建github技术博客by jekyll,也是折腾了几天才做成自己满意的,昨天决定换成hexo,也是花了一天半时间,为了追求更好,必须折腾!

分享到:
评论

相关推荐

    手把手教你学DSP:基于TMS320F28335

    手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F28335 手把手教你学DSP:基于TMS320F...

    教你如何用Github找开源项目(保姆级教程)

    教你如何用Github找开源项目(保姆级教程)教你如何用Github找开源项目(保姆级教程)教你如何用Github找开源项目(保姆级教程)教你如何用Github找开源项目(保姆级教程)教你如何用Github找开源项目(保姆级教程)教你...

    github使用教程github使用教程

    github使用教程github使用教程github使用教程github使用教程github使用教程github使用教程github使用教程github使用教程github使用教程github使用教程github使用教程github使用教程github使用教程github使用教程...

    GitHub入门指南:一步一步教你使用GitHub

    GitHub入门指南:一步一步教你使用GitHub

    手把手教你从eclipse 提交 代码到github

    作为一个IT行业大师,我将为你详细讲解如何从eclipse提交代码到github的步骤。 首先,我们需要了解什么是github。github是一个基于Web的版本控制系统,允许开发者在线存储和分享代码。github提供了许多有用的功能,...

    微信小程序demo:github博客(源代码+截图)

    微信小程序demo:github博客(源代码+截图)微信小程序demo:github博客(源代码+截图)微信小程序demo:github博客(源代码+截图)微信小程序demo:github博客(源代码+截图)微信小程序demo:github博客(源代码+截图)微信...

    github page博客系统 v1.0.zip

    github page博客系统简介 针对github page的博客系统,在本地生成html静态缓存,然后上传到git上通过github page就可以访问,目前还有很多bug,还在继续修改中。不需要数据库,解压运行到环境即可访问。 github ...

    手把手教你搭建免费个人博客

    - **Github Pages**:这是一种非常流行的搭建博客的方式,支持自定义域名和无限流量,适合有一定技术基础的用户。 - **Jekyll**:一种静态网站生成器,与 Github Pages 结合使用可以创建功能丰富的博客。 - **参考...

    GitHub 使用手册 入门教程

    GitHub 初识 GitHub 简介 GitHub 优势 GitHub 注册 安装 Git 安装 Git 通过 Git 验证 GitHub 创建仓库 在 GitHub 上创建新仓库 提交你的第一个修改 Fork 一个仓库 Fork 一个示例仓库 同步你的 Fork 仓库 检索其他...

    Github Pages 搭建个人博客

    Github提供了Github Pages服务,用于为项目建立介绍站点,也可以用来建立个人博客。 知识点二:Github Pages的优点 Github Pages有以下优点: 1. 轻量级的博客系统,没有复杂的配置。 2. 使用标记语言,如Markdown...

    使用github搭建的个人博客

    使用github搭建的个人博客

    github搭建博客1

    github搭建博客1

    GitHub 上高质量、有趣实用的开源技术教程、开发者工具、编程网站、技术资讯

    许多技术博客、社区和新闻站点都会在GitHub上发布内容,如Markdown格式的博客文章、技术报告或者数据可视化项目。"GitHubDaily-master"可能就整理了每日的GitHub热门项目或技术动态,帮助开发者跟踪最新的技术趋势。...

    博客系列:Hexo+Github博客搭建教程

    博客系列:Hexo+Github博客搭建教程

    GitHub入门教程 手把手教你最简单的开源项目托管

    主要介绍了GitHub入门教程 手把手教你最简单的开源项目托管,需要的朋友可以参考下

    超详细Github Desktop教程.pdf

    超详细Github Desktop教程.pdf,高清实用,需要的伙伴可以看看

    使用Github Pages建独立博客 _ BeiYuu1

    【使用Github Pages建独立博客】 GitHub Pages 是GitHub提供的一项服务,允许用户通过简单的步骤创建和托管静态网页,包括个人博客或项目文档。这个服务特别适合程序员和博主,因为它提供了无需复杂服务器配置的轻量...

    基于Github的博客平台gistblog.zip

    gistblog 是一个简单的 Node.js 应用,使用 Github 的认证系统和 gist 提供的后台存储来实现博客的功能。可使用 Markdown 编写博客。 标签:gistblog

    5 分钟教你快速掌握 GitHub Actions 自动部署博客.doc

    在本文中,我们将深入探讨GitHub Actions,这是一个由GitHub开发的技术,用于自动化开发工作流程,特别是持续集成(CI)和持续部署(CD)。自从Actions全面开放给所有开发人员和存储库以来,它已经成为许多开发团队...

Global site tag (gtag.js) - Google Analytics