Hexo your blog

作者: Beatrice7 | 来源:发表于2014-12-25 14:54 被阅读1416次

    Preface

    本来打算个人blog用英文写,BUT短时间内是不可能了,哈哈没办法,英语捉急,装逼未遂。之前是用jekyll搭建的,用的主题是歪果仁写的,有一些Google的东西还有字库神马的,虽然看起来高大上但是由于天朝一些不可抗力因素等等,总之页面加载很慢,有限的生命都浪费在看进度条上了。后来看到童鞋在用hexo,艾玛~人家这页面加载飕飕的,themes也正是我喜欢的Lofter风格,果断迁移啊!索性把之前博客园的几篇搬到这里了,以后专一写这个blog,不去其它地儿乱涂乱画了。

    Hexo

    关于hexo的介绍啥的,虽然你没问,但是我也就不说了。这里主要记录一下我搭建的过程以及遇到的一些细节问题。

    Step1. 安装Git、Node.js以及npm工具

    详情参考hexo文档

    brew install git
    bew install node
    #查看是否安装成功
    node -v
    npm -v
    

    Tip1:
    Node 一般会安装在/usr/local/bin/node
    npm 一般会安装在/usr/local/bin/npm
    有时候会出现这种情况

    zsh: command not found: balabalabala
    

    这时候你需要把上述相应的地址添加到$PATH中,执行如下语句

    export PATH=/usr/local/npm/bin:$PATH
    

    Tip2:
    也许你按照hexo文档安装的时候会出现类似如下情况

    zsh: command not found: nvm
    

    那么你可能是漏掉了这个步骤,可以理解为安装后还需要激活一下

    source ~/.nvm/nvm.sh
    

    Step2. 安装Hexo并创建文件

    npm install hexo -g
    hexo init <folder> #folder为你创建博客的文件夹名称
    cd <folder>
    

    这时候一个blog就已经搭建好了,folder的目录结构如下:

    .
    ├── _config.yml  # 配置文件
    ├── package.json
    ├── scaffolds
    ├── scripts
    ├── source
    |   ├── _drafts
    |   └── _posts  # 写的文章都放到这个文件夹下
    └── themes  # 各种主题
    

    默认的theme是landscape,可以在themes文件下看到,以后想换主题只需要将相应的主题包下载到themes文件夹下即可。在_posts文件夹中自带一篇hello world.md

    Step3. Hexo常用命令

    hexo new "postName" #新建文章
    hexo new page "pageName" #新建页面到上述目录结构的_posts中
    hexo generate #生成静态页面至public目录
    hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
    hexo deploy #将.deploy目录部署到GitHub
    #简写
    hexo n == hexo new
    hexo g == hexo generate
    hexo s == hexo server
    hexo d == hexo deploy
    

    现在可以先运行一下看看

    hexo server
    

    然后,在浏览器中输入localhost:4000可以查看本地生成的效果。

    Step4. 配置_config.yml文件

    说明一下,这里有很多细节问题需要注意,我先把自己的配置放上来,然后慢慢说,先喝口水。

    # Hexo Configuration
    ## Docs: http://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    
    # Site
    title: Beatrice7's Fancy
    subtitle: To know enough to be dangerous
    description: beatrice7's blog | font-end | 
    author: Beatrice
    email: aizun777@gmail.com
    language: zh-CN
    
    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://beatrice7.tk
    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 # 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
    highlight:
      enable: true
      line_number: true
      tab_replace:
    
    # Category & Tag
    default_category: uncategorized
    category_map:
    tag_map:
    
    # Archives
    ## 2: Enable pagination
    ## 1: Disable pagination
    ## 0: Fully Disable
    archive: 1
    category: 1
    tag: 1
    
    # Server
    ## Hexo uses Connect as a server
    ## You can customize the logger format as defined in
    ## http://www.senchalabs.org/connect/logger.html
    port: 4000
    server_ip: localhost
    logger: false
    logger_format: dev
    
    # 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: MMM D YYYY
    time_format: H:mm:ss
    
    # Pagination
    ## Set per_page to 0 to disable pagination
    per_page: 10
    pagination_dir: page
    
    # Disqus
    disqus_shortname:
    
    # Extensions
    ## Plugins: https://github.com/hexojs/hexo/wiki/Plugins
    ## Themes: https://github.com/hexojs/hexo/wiki/Themes
    theme: landscape-plus
    exclude_generator:
    plugins: 
    - hexo-generator-feed
    
    # Deployment
    ## Docs: http://hexo.io/docs/deployment.html
    deploy:
      type: github
      repository: git@github.com:Beatrice7/Beatrice7.github.io.git
      branch: master
    

    网上的很多教程都已经说的很详细了,我这里说几点细节,也是我当时走的弯路

    • Archives模块
      默认里面写的是2,全都改成1,因为这里的注释是有些问题的,否则就不能在archive目录下按照年份月份归档文章了。
    • Deployment模块
      这部分只要按照我的设置就好,但是注意 repository: git@github.com:后面添加的第一项是你github的名称;第二项是你的博客所在的库的名称,不要看到网上很多.com.git就照搬照抄哦。

    Step5. 上传至github

    hexo g
    hexo d
    

    Step6. 安装插件和主题

    Hexo提供丰富的插件以及主题
    安装方法如下:

    npm install <plugin-name> --save
    git clone <repository> themes/<theme-name>
    

    附上几篇更加详细的教程链接:
    hexo你的博客
    使用hexo搭建博客
    通过Hexo在Github上搭建博客教程
    Hexo常见问题解决方案

    从jekyll迁移到hexo

    Tip1:
    很简单,只需要把原来的.md各种文件copy到_posts文件夹下即可,但这里有几点细节,需要在_config.yml中添加

    new_post_name: :year-:month-:day-:title.md
    

    我之前犯二,竟然把permalink: :year/:month/:day/:title/给改了,然后导致文章没有按照年月归档,全部生成在根目录了。前车之鉴,阅读文档时请务必保持头脑清醒!

    Tip2:
    关于代码块,你需要做一些替换。把之前的关键字highlight替换为codeblock; endhighlight替换为endcodeblock。

    写在最后

    呦西,第一篇教程性质的文章终于写粗来了。莫名的,竟生出一种无所不能的使命感,仿佛连期末考试都无需担心了。
    2015年到来之前,再写一篇淡淡的总结就收工!

    相关文章

      网友评论

        本文标题:Hexo your blog

        本文链接:https://www.haomeiwen.com/subject/ntsatttx.html