zoukankan      html  css  js  c++  java
  • 使用Hexo 搭建自己的博客

    使用Hexo 搭建自己的博客

    最近一直都想着如何去搭建属于自己的博客,有空的时候就写写文章什么的。
    本人对该博客系统的要求是:

    • 博文的编写要采用现在流行的MarkDown来进行编写。
    • 本人还不想去注册域名和云服务器(这些可都是钱啊)。
    • 博文系统需要开源且易上手的。

    通过以上的这些分析,我采用了hexogithub来进行开发部署搭建自己的博文系统。

    当然了网上也有很多教程,但是我觉得总结的还是有些不全面。现在我将结合我自己搭建好的博文系统综合总结。不喜勿喷。)


    本机开发环境

    • win10 家庭版
    • node.js 6.9.2
    • git 2.11.1
    • github账户一枚
    • hexo 1.0.2

    先学习一些概念啊

    什么是Hexo

    Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架,可以方便的生成静态网页托管在github和Heroku上,引用Hexo作者 @tommy351的话:

    快速、简单且功能强大的 Node.js 博客框架。A fast, simple & powerful blog framework, powered by Node.js.

    GitHub Pages是什么?

    GitHub Pages 可以被认为是用户编写的、托管在github上的静态网页。由于它的空间免费稳定, 可以用于介绍托管在github上的Project或者搭建网站。有两种形式: Project Site 和 User/Org Site,二者之间的差异可以戳GitHub Pages 。基于 GP 创建Site是很方便的,这有一个简单的教程: 学习 Github Page 教你分分钟搭建自己的博客

    gp 生成的网站的默认域名是 username.github.io 或者 username.github.io/project-name ,但gp是支持自定义域名的:Custom Domain Name 。购买域名之后,可以和默认的二级域名进行绑定,教程参考:购买域名、设置DNS

    更多关于gp的信息,可以戳:Github Pages Help


    上面哔哔了那么多,现在可以正式开始操练一把啦

    1. 安装node.js

    这个是必须的安装的哦。这个安装其实很简单,网上教程一大把我就不在此赘述了。node.js安装传送门

    2. 安装git

    这个是必须的安装的哦。这个安装其实很简单,网上教程一大把我就不在此赘述了。git安装传送门

    3. hexo安装

    • 在windows命令行中执行下面的命令
    npm install -g hexo
    
    • 查看是否安装成功,执行下面的命令
    hexo --version
    

     

    安装成功hexo

    安装成功hexo

     

    • hexo 命令解释
      enter description here

      help 查看帮助信息
      init[文件名] 创建一个hexo项目,不指定文件名,则在当前目录下创建
      version 查看hexo版本
      --config config-path 指定配置文件、代替默认的_config.yml
      --cwd cwd-path 自定义当前工作目录
      --debug 调试模式,输出所有日志信息
      --safe 安全模式,禁用所有的插件和脚本
      --silent 无日志输出模式

    4. 创建hexo项目

    • 执行新建一个hexo项目命令
    hexo init blogsDemo
    

    项目内的目录结构如下:
    enter description here
    通过上面的命令,我们创建一个hexo的blogsDemo项目,并且自动生成一篇博文hello word。接下来我们需要在本地测试下这个项目能否跑得起来。

    这个项目大概大小28.3M。如果哪位生成的时候报错或者大小差太多,那么请从新创建并且配置翻墙工具。

    • 安装项目依赖库
    npm install
    
    • 本地测试博文系统
    hexo server 
    

    在浏览器中输入:http://localhost:4000/

     

    enter description here

    运行效果

     

    到此为止我们就完成了hexo开发环境搭建、测试工作。那么接下来我们讲下这个项目中的配置文件。

    5. hexo目录文件解析

     

    enter description here

    hexo项目目录结构

     

    1、 scaffolds :模板文件夹,新建文章时,Hexo 会根据 scaffold 来建立文件。Hexo 有三种默认布局: post 、 page 和 draft ,它们分别对应不同的路径。新建文件的默认布局是 post ,可以在配置文件中更改布局。用 draft 布局生成的文件会被保存到 source/_drafts 文件夹。

    2、 source :资源文件夹是存放用户资源的地方。

    3、 source/_post :文件箱。(低版本的hexo还会存在一个 _draft ,这是草稿箱)除 _posts 文件夹之外,开头命名为 _ (下划线)的文件/ 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去

    4、 themes :主题 文件夹。Hexo 会根据主题来生成静态页面。

    5、 themes/landscape :默认的皮肤文件夹

    6、 _config.yml :全局的配置文件,每次更改要重启服务。

    低版本的Hexo还会生成scripts文件夹,里面用于保存扩展Hexo的脚本文件。

    全局配置文件 _cofing.yml 解析

    下面的代码文件详细的介绍了该配置文件的用法

    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    
    # Site 站点配置
    title: P了个F #网站标题
    subtitle: 码农世界 #网站副标题
    description: 我是一个来自体育世界的码农 #网站描述
    author: 杨朋飞 #作者
    language: zh-CN #网站使用的语言
    timezone: Asia/Shanghai #网站时区
    
    # URL #可以不用配置
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://yoursite.com
    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 #Incloude code 文件夹
    i18n_dir: :lang #国际化文件夹
    skip_render: #跳过指定文件的渲染,您可以使用glob来配置路径
    
    # Writing 写配置
    new_post_name: :title.md #新文章的文件名称
    default_layout: post #默认布局
    titlecase: false # Transform title into titlecase
    external_link: true # Open external links in new tab
    filename_case: 0 #把文件名转换为(1)小写或(2)大写
    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 #每页显示的文章量(0=关闭分页功能)
    pagination_dir: page #分页目录
    
    # Extensions 扩展
    ## Plugins: https://hexo.io/plugins/ 插件
    ## Themes: https://hexo.io/themes/ 主题
    theme: landscape #当前主题名称
    
    # Deployment #部署到GitHub
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: http://github.com/yangpengfei/yangpengfei.github.io.git
      branch: master
    
    

    一般主题下有一个 languages 文件夹,用于对应 language 配置项。

    1. language 的配置项是 zh-CN ,则会在 languages 文件夹下找到 zh-CN.yml 文件中对应的项来解释。修改全局配置时,注意缩进,同时注意冒号后面要有一个空格。 2. language和timezone都是有输入规范的,详细可参考[语言规范][14]和[时区规范][15]。

    主题配置

    主题的配置文件在 /themes/主题文件夹/_config.yml ,一般包括导航配置(menu),内容配置(content),评论插件,图片效果(fancybox)和边栏(sidebar)。

    Hexo提高了大量的主题,可以在全局配置文件中更改主题:

    # Extensions 扩展
    ## Plugins: http://hexo.io/plugins/ 插件
    ## Themes: http://hexo.io/themes/ 主题
    theme: 你的主题名称
    

    主题的文件目录必须在 themes 目录下。 Hexo主题更换教程
    更多Hexo主题戳此: Hexo Themes

    6. 新建一篇博文

    • 在windows命令行中输入如下命令:

    hexo new [layout] <title> 其中layout是可选参数,默认值为 post 。
    如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,需用引号括起来。

    Hexo提供的layout在 scaffolds 目录下,也可以在此目录下自建layout文件。新建的文件则会保存到 source/_post 目录下。

    hexo new '第一篇博文'
    

     

    enter description here

    第一篇博文

     

    • 使用sublimeText或者你认为其他好用的工具都行,接着就可以欢快的进行写博文啦~~~~
      enter description here

    • 接着我们可以使用hexo server启动服务,就看在浏览器中看到我写的这个博文啦。

    • 小技巧

    发表的文章会全部显示,如果文章很长,就只要显示文章的摘要就行了。在需要显示摘要的地方添加如下代码即可:

    以上是摘要
    <!--more-->
    以下是全文
    

     

    enter description here

    1488621382866.jpg

     

    刷新,就能够看到只显示摘要了,同时会提供 Read More 的链接:
    enter description here
    这个文字可以更改,在主题的配置文件( themes/主题文件夹/_config.yml )中,找到 Content :

    # Content
    excerpt_link: Read More #可以更改成想要显示的文字
    fancybox: true
    

    此外,可以修改文章的模板参数,打开 scaffolds/post.md ,增加类别和描述:

    ---
    title: {{ title }}
    date: {{ date }}
    tags:
    ---
    
    在部署hexo博文之前,需要通过命令把所有的文章(.md文章)都做静态化处理,就是生成对应的html, javascript, css,使得所有的文章都是由静态文件组成的:
    hexo generate
    

     

    enter description here

    生成静态文件

     

    在本地目录下,会生成一个public的目录,里面包括了所有静态化的文件。

    总结:

    到此为止我们已经学习了:

    1. 如何创建hexo项目
    2. 如何设置全局配置文件_config.yml
    3. 如何设置主题
    4. 如何发布一篇博文
    5. 如何将markdown格式的博文生成静态文件。

    将hexo部署到github

    注册Github账号

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

    创建仓库

     

    enter description here

    1488622729726.jpg

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

     

     

    创建仓库

    1488622775546.jpg

     

    在仓库名字输入框中输入:
    你的github用户名.github.io
    然后点击Create repository即可。

    生成添加秘钥

    在windows命令行中输入下面的命令

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

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

     

    enter description here

    1488623060458.jpg

     

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

    配置_config.yml

    deploy:
      type: git
      repo: http://github.com/yangpengfei/yangpengfei.github.io.git
      branch: master
    

    这里输入的地址我们需要注意:http和https,这里我选择的是http。由于我没有将ssl添加到github上面,所以我采用http。

    安装hexo-deployer-git

    npm install hexo-deployer-git --save
    

    执行hexo deploy推送到 githu

    hexo deploy
    

    在执行这个命令的时候,会提示我们输入github的账号和密码。

    以后我们需要写一篇博文怎么办???

    1. 只要在blog目录下的source_posts下面添加.md文件就行了,我们也可以使用 执行hexo new命令来创建并进行编写。
    2. 推送到github。
    hexo clean
    hexo generate
    hexo deploy
    

    参考文章

    简洁轻便的博客平台: Hexo详解
    hexo —— 简单、快速、强大的Node.js静态博客框架
    20分钟教你使用hexo搭建github博客
    HEXO+Github,搭建属于自己的博
    Hexo折腾记——基本配置篇

  • 相关阅读:
    DOM
    笔试题
    小案例
    前端基础面试题
    2048小游戏
    JS原型与构造函数
    String字符串和正则表达式
    数组
    MySQL_PHP学习笔记_2015_0906_使用PHP模板
    MySQL_PHP学习笔记_2015_0614_PHP传参总结_URL传参_表单传参
  • 原文地址:https://www.cnblogs.com/ypfnet/p/6502532.html
Copyright © 2011-2022 走看看