zoukankan      html  css  js  c++  java
  • 使用hexo创建github博客

    前言

    前面说过,之前用wordpress辛辛苦苦搭建的博客,因为服务器和域名的问题挂掉了。后来发现github也能够搭建自己的博客,不需要去关心主机域名的问题,而且还能使用Markdown来写博客,就研究了一番。

    创建博客页面仓库

    创建地址:https://github.com/new
    创建仓库的前提是必须先有github账号,至于怎么注册账号,就不具体展开说明了。
    创建的仓库名字需要和你的账号对应,如oyjt.github.io
    输入基本信息,然后点击创建仓库
    这里写图片描述

    进入项目设置页面

    现在仓库就已经建好了,接下来进入设置界面。
    因为这个项目就是专门的放页面的,所以master分支即可。
    这里写图片描述

    进入页面自动生成器

    在设置界面,点击运行自动页面生成器,其他默认即可。
    这里写图片描述

    写第一篇博客

    点击之后,会跳到下面的页面,现在我们来写第一篇博客
    这里写图片描述
    写完之后点击继续,选择一个主题
    这里写图片描述

    选择主题并发布

    这里提供了一些主题,可以一个个点击查看效果,找的喜欢的主题之后,就可以发布了。
    选择主题之后,会生成一些css,html,img到你的仓库。
    如果没有找到自己喜欢的主题,可以用其他的主题,当然也可以自己修改主题。
    这里写图片描述

    查看效果

    现在,你就可以访问自己的github主页了。
    比如我的博客访问地址:http://oyjt.github.io/
    访问效果图:
    这里写图片描述


    到这里你会奇怪,说了这么多和hexo有什么关系,完全都没用到hexo,内容和标题完全不搭嘛。
    是的!没错,为了便于管理博客,接下来就是hexo部分,请继续往下看吧!

    了解Hexo

    Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

    安装Hexo

    安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序:

    上面是以Windows系统作为例子,其他系统以及具体的安装方法,就不展开说明了。
    如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。

    npm install hexo-cli -g
    
    #如果命令无法运行,可以尝试更换taobao的npm源
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    
    

    创建Hexo文件夹

    安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

    $ hexo init <folder>
    $ cd <folder>
    $ npm install
    

    新建完成后,指定文件夹的目录如下:

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes
    
    

    Hexo 文件简介

    _config.yml
    网站的 配置 信息,您可以在此配置大部分的参数。

    package.json
    应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。

    package.json
    {
      "name": "hexo-site",
      "version": "0.0.0",
      "private": true,
      "hexo": {
        "version": ""
      },
      "dependencies": {
        "hexo": "^3.0.0",
        "hexo-generator-archive": "^0.1.0",
        "hexo-generator-category": "^0.1.0",
        "hexo-generator-index": "^0.1.0",
        "hexo-generator-tag": "^0.1.0",
        "hexo-renderer-ejs": "^0.1.0",
        "hexo-renderer-stylus": "^0.2.0",
        "hexo-renderer-marked": "^0.2.4",
        "hexo-server": "^0.1.2"
      }
    }
    

    scaffolds
    模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

    source
    资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

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

    本地查看效果

    继续执行以下命令,成功后可登录localhost:4000查看效果

    $ hexo server
    
    

    Hexo常用简写命令

    hexo n #生成文章,或者source\_posts手动编辑
    hexo s #本地发布预览效果
    hexo g #生成public静态文件
    hexo d #部署之前预先生成静态文件
    

    部署静态网页到GitHub

    Hexo 提供了快速方便的一键部署功能,让您只需一条命令就能将网站部署到服务器上。

    $ hexo deploy
    
    

    在开始之前,您必须先在 _config.yml 中修改参数,一个正确的部署配置中至少要有 type 参数,例如:

    deploy:
      type: git
    
    

    发布到git上需要安装 hexo-deployer-git 插件。

    $ npm install hexo-deployer-git --save
    
    

    修改配置。

    deploy:
      type: git
      repo: <repository url>
      branch: [branch]
      message: [message]
    
    参数 描述
    repo 库(Repository)地址
    branch 分支名称。如果您使用的是 GitHub 或 GitCafe 的话,程序会尝试自动检测。
    message 自定义提交信息 (默认为 Site updated: {{ now("YYYY-MM-DD HH:mm:ss") }})

    配置完之后,运行命令 hexo d ,就能够将public里的文件发布到github。
    现在就可以去查看网站的效果啦!
    http://oyjt.github.io/

    参考资料:

    1. 创建GitHub技术博客全攻略
    2. Hexo官方文档
    3. 使用GitHub和Hexo搭建免费静态Blog
  • 相关阅读:
    Using Resource File on DotNet
    C++/CLI VS CSharp
    JIT VS NGen
    [Tip: disable vc intellisense]VS2008 VC Intelisense issue
    UVa 10891 Game of Sum(经典博弈区间DP)
    UVa 10723 Cyborg Genes(LCS变种)
    UVa 607 Scheduling Lectures(简单DP)
    UVa 10401 Injured Queen Problem(简单DP)
    UVa 10313 Pay the Price(类似数字分解DP)
    UVa 10635 Prince and Princess(LCS N*logN)
  • 原文地址:https://www.cnblogs.com/oyjt/p/5130584.html
Copyright © 2011-2022 走看看