zoukankan      html  css  js  c++  java
  • hexo+github搭建博客

    Hexo是一款基于Node.js的静态博客框架,配合github可以搭建属于自己的博客。

    搭建环境

    安装Node.js

    Hexo需要node.js支持,可以到node.js中文网下载适合自己系统的安装包。安装也比较简单,一路next下去就可以了。

    安装完后win + r 输入cmd回车,打开命令行界面,分别输入node -v 和npm -v,看到类似如下结果就说明安装成功了。

    >node -v
    v6.10.1
    >npm -v
    3.10.10
    

    安装Hexo

    在合适的地方建立一个文件夹,用于安装hexo框架和存放你的博客。我的文件夹是D:devsofthexo。

    命令行切换到hexo目录

    C:Users	enny>d:
    
    D:>cd devsoft
    
    D:devsoft>cd hexo
    
    D:devsofthexo>
    

    输入如下命令安装hexo到当前目录

    npm install hexo-cli -g
    

    命令行显示一系列安装详情,等待片刻,完成后,继续输入

    npm install hexo --save
    

    又会看到一堆信息,完成后,输入hexo -v检查下,看到类似如下信息,说明安装成功了。

    D:devsofthexo>hexo -v
    hexo: 3.2.2
    hexo-cli: 1.0.2
    os: Windows_NT 10.0.14393 win32 x64
    http_parser: 2.7.0
    node: 6.10.1
    v8: 5.1.281.95
    uv: 1.9.1
    zlib: 1.2.8
    ares: 1.10.1-DEV
    icu: 58.2
    modules: 48
    openssl: 1.0.2k
    

    配置Hexo

    命令行还在hexo根目录,输入

    hexo init
    

    继续输入

    npm -install
    

    npm会自动安装需要的组件。之后输入

    npm install hexo-deployer-git --save
    

    hexo扩展,用于将博客发布到github上。

    体验博客

    本地博客

    继续输入hexo g生成文件

    D:devsofthexo>hexo g
    INFO  Start processing
    INFO  Files loaded in 2.28 s
    INFO  Generated: search.xml
    INFO  Generated: sitemap.xml
    INFO  Generated: atom.xml
    INFO  Generated: index.html
    INFO  Generated: categories/index.html
    INFO  Generated: about/index.html
    INFO  Generated: tags/index.html
    INFO  Generated: archives/index.html
    INFO  Generated: favicon.ico
    INFO  Generated: archives/2017/04/index.html
    ......   //省略的文件信息
    

    再输入hexo s启动服务

    D:devsofthexo>hexo s
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
    

    在浏览器中输入http://localhost:4000/ 就可以看到博客首页了。

    要停止服务,在命令行按Ctrl + C。

    建立博客仓库

    进入https://github.com/ 登录自己的账号,新建一个仓库,命名为yourname.github.io(这个就是你博客的访问地址,一定要这种格式,否则无效)。例如我的tenny-peng.github.io。

    关于安装git和github可以参考我的Git简单教程,这里就略过了。

    建立好自己的博客仓库(yourname.github.io)后,打开hexo根目录下的_config.yml,找到Deployment,修改成如下内容

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: git@github.com:yourname/yourname.github.io.git
      branch: master
    

    例如我的

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: git@github.com:tenny-peng/tenny-peng.github.io.git
      branch: master
    

    编写博客

    hexo根目录下执行

    hexo new title "test"
    

    然后在D:devsofthexosource_posts下就能看到test.md文件了。

    .md文件是用MarkDown语法写的,关于MarkDown语法,可以参考我的MarkDown基础语法
    MarkDown文件编辑器推荐用Atom,Atom是Github专门为程序员推出的一个跨平台文本编辑器。可以到https://atom.io/ 下载Atom,也可以找寻其他自己喜欢的MarkDown编辑器。

    部署博客

    文章编辑完后,使用命令生成,部署

    hexo g      //生成静态文件
    hexo d      //部署到github上
    

    也可以直接执行以下命令,相当于上面两条命令一起执行

    hexo d -g     //部署前先生成
    

    部署完成后,访问https://yourname.github.io (例如我的https://tenny-peng.github.io) ,就可以看到生成的文章。

    使用主题

    主题可以使我们的博客更加个性化,更加美观,等等。
    这里我使用了NexT主题,其他主题配置可参考其说明,下面以NexT为例。

    安装NexT

    Hexo 安装主题的方式非常简单,只需要将主题文件拷贝至站点目录的 themes 目录下, 然后修改下配置文件即可。

    如果你熟悉Git,建议你使用克隆最新版本的方式,之后的更新可以通过git pull来快速更新,而不用再次下载压缩包替换。这里我们使用git。

    命令行切换到hexo根目录,执行

    git clone https://github.com/iissnan/hexo-theme-next themes/next
    

    启用主题

    找到hexo根目录下的站点配置文件_config.yml,修改theme

    theme: next
    

    设定Scheme

    Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme,他们是:

    • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
    • Mist - Muse 的紧凑版本,整洁有序的单栏外观
    • Pisces - 双栏 Scheme,小家碧玉似的清新

    找到主题next目录下的_config.yml(注意:不是hexo根目录下的配置文件,根目录下的是全局博客配置,这个是针对某个主题的配置),设定自己喜欢的Scheme,使用的去掉#,不使用的注释#。

    # ---------------------------------------------------------------
    # Scheme Settings
    # ---------------------------------------------------------------
    
    # Schemes
    #scheme: Muse
    #scheme: Mist
    scheme: Pisces
    

    站点设置

    编辑站点配置文件,设置博客标题,作者,语言等,更多配置可自行查询。

    # Site
    title: Tenny's Blog
    author: Tenny Peng
    language: zh-Hans     //简体中文
    

    菜单配置

    编辑主题配置文件,设置首页分类标签等目录,更多配置可自行查询。

    menu:
      home: /
      categories: /categories
      about: /about
      archives: /archives
      tags: /tags
    

    这里设定的目录都必须手动创建在hexo/source目录下,否则发布到github上是找不到的。

    头像设置

    编辑主题配置文件,修改avatar(如没有可新建)

    avatar: /images/avatar.jpg
    

    这里的图片需要放在主题目录下(themes/next/source/images/avatar.jpg),而不是站点目录。

    网站图标

    编辑主图配置文件,修改favicon

    favicon: /favicon.ico
    

    然后将favicon.ico放在hexo/source目录下即可。

    以上基本就完成了个人博客的搭建,更多信息可参考:

    史上最详细的Hexo博客搭建图文教程

    hexo官网

    next文档

  • 相关阅读:
    ExcelManager基于.Net的Excel读写管理类库(二)
    ExcelManager基于.Net的Excel读写管理类库(一)
    NHibernate初探!
    也谈软件工程!
    本人初学WCF ,请教一个问题
    初来咋到,今天终于在这里建起了一个家!
    c#中委托和直接函数调用用什么区别,好处和目的在哪?
    CreateThread, AfxBeginThread,_beginthread, _beginthreadex的区别
    C++线程同步
    C++中using的作用
  • 原文地址:https://www.cnblogs.com/tenny-peng/p/11542912.html
Copyright © 2011-2022 走看看