zoukankan      html  css  js  c++  java
  • 转: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: git
      repo: 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

  • 相关阅读:
    【转】UML中类与类之间的5种关系表示
    OSGI框架—HelloWorld小实例
    解决:“Workbench has not been created yet” error in eclipse plugin programming”,OSGI启动控制台报错问题
    Restful风格到底是什么?怎么应用到我们的项目中?
    Java程序员面试题集(1-50
    【转】Spring中@Component的作用
    【转】Spring AOP 实现原理与 CGLIB 应用
    【转】spring和springMVC的面试问题总结
    Java算法之“兔子问题”
    DDD创始人Eric Vans:要实现DDD原始意图,必须CQRS+Event Sourcing架构
  • 原文地址:https://www.cnblogs.com/ziqian9206/p/7241928.html
Copyright © 2011-2022 走看看