• 手把手教 GitHub + Hexo 搭建博客


    前言

    在很久以前,博主就想着要有自主的博客专栏或者网站。经历了博客园这个需要所谓的编辑审核,一直比较困惑,这些编辑是什么出身,怎么知道技术博客的价值性。

    接下来找到了开源中国,这个可以自由发言的地方。不过,不知道是不是受众面不广,访问量都不是很理想。

    再然后就来自己动手开始搭建博客。从手写html发布文章,到使用jekyll,最后到了hexo阵营。

    终于,有种找到家的赶脚。hexo不仅搭建方便,而且在后续的功能扩展以及文章发布都是非常方便的。不仅如此,还可以本地调试,预览效果。最方便的是支持markdown编写文档。

    本文就是介绍如何安装使用hexo搭建属于自己的博客。从此不再担心投稿被莫名拒绝。可以在自己的一亩三分地讲述着自己的故事。

    环境准备

    安装Git

    MAC OS X 是自带Git命令行工具。

    Windows 可以安装Git Bash。

    安装Node.js

    前往官方地址,根据教程安装即可。

    安装hexo

    $ sudo npm install hexo-cli -g
    

    使用hexo

    # 创建hexo文件夹
    $ mkdir hexo
    
    # 进入hexo文件夹
    $ cd hexo
    
    # 初始化hexo
    $ hexo init
    
    # 安装依赖包
    $ npm install
    
    # 本地查看
    # 先运行下面的命令,再在浏览器输入localhost:4000即可
    $ hexo server
    
    # 问题:执行hexo server提示找不到该指令
    # 解决办法:在Hexo 3.0 后server被单独出来了,需要安装server,安装的命令如下:
    $ npm install hexo -server --save
    

    生成静态网站

    $ hexo generate
    

    目录结构

    .
    ├── .deploy #需要部署的文件
    ├── node_modules #Hexo插件
    ├── public #生成的静态网页文件
    ├── scaffolds #模板
    ├── source #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里
    | ├── _drafts #草稿
    | └── _posts #文章
    ├── themes #主题
    ├── _config.yml #全局配置文件
    └── package.json
    

    全局配置 _config.yml

    # Hexo Configuration
    ## Docs: http://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/
    # Site #站点信息
    title:  #标题
    subtitle:  #副标题
    description:  #站点描述,给搜索引擎看的
    author:  #作者
    email:  #电子邮箱
    language: zh-CN #语言
    # URL #链接格式
    url:  #网址
    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 #新文章标题
    default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿)
    titlecase: false #标题转换成大写
    external_link: true #在新选项卡中打开连接
    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: 开启分页
    1: 禁用分页
    0: 全部禁用
    archive: 2
    category: 2
    tag: 2
    # Server #本地服务器
    port: 4000 #端口号
    server_ip: localhost #IP 地址
    logger: false
    logger_format: dev
    # Date / Time format #日期时间格式
    date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
    time_format: H:mm:ss
    # Pagination #分页
    per_page: 10 #每页文章数,设置成 0 禁用分页
    pagination_dir: page
    # Disqus #Disqus评论,替换为多说
    disqus_shortname:
    # Extensions #拓展插件
    theme: landscape-plus #主题
    exclude_generator:
    plugins: #插件,例如生成 RSS 和站点地图的
    - hexo-generator-feed
    - hexo-generator-sitemap
    # Deployment #部署,将 lmintlcx 改成用户名
    deploy:
      type: git
      repo: github创库地址.git
      branch: master
    

    注意

    • 配置文件的冒号“:”后面有一个空格
    • repo: github创库地址.git

    hexo命令行使用

    常用命令:
    hexo help #查看帮助
    hexo init #初始化一个目录
    hexo new "postName" #新建文章
    hexo new page "pageName" #新建页面
    hexo generate #生成网页,可以在 public 目录查看整个网站的文件
    hexo server #本地预览,'Ctrl+C'关闭
    hexo deploy #部署.deploy目录
    hexo clean #清除缓存,强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹
    
    简写:
    hexo n == hexo new
    hexo g == hexo generate
    hexo s == hexo server
    hexo d == hexo deploy
    

    使用GitHub

    注册账号

    前往GitHub官网注册账号,按照网站提示注册。

    创建代码仓库

    这个仓库的名字需要和你的账号对应。格式: yourname.github.io

    具体使用GitHub可以参考:《GitHub 使用》

    编辑文章

    # 新建文章
    $ hexo new "标题"
    

    在 _posts 目录下会生成文件标题.md

    ---
    title: Hello World
    date: 2015-07-30 07:56:29 #发表日期,一般不改动
    categories: hexo #文章文类
    tags: [hexo,github] #文章标签,多于一项时用这种格式
    ---
    正文,使用Markdown语法书写
    

    编辑完后保存, 预览

    $ hexo server
    

    hexo部署

    执行下列指令完成部署

    hexo generate
    hexo deploy
    

    以下提示说明部署成功

    [info] Deploy done: git
    

    至此,博客搭建完成,基本使用介绍完毕。希望对大家有所帮助。

  • 相关阅读:
    基于 HTML5 WebGL 的 3D 仓储管理系统
    基于 HTML5 WebGL 的 3D “弹力”布局
    基于HTML5 Canvas 实现地铁站监控
    基于HTML5的WebGL经典3D虚拟机房漫游动画
    根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局
    玩转 HTML5 下 WebGL 的 3D 模型交并补
    基于HTML5 Canvas WebGL制作分离摩托车
    基于HTML5 Canvas的3D动态Chart图表
    基于HTML5 Canvas的工控SCADA模拟飞机飞行
    [iOS]过渡动画之高级模仿 airbnb
  • 原文地址:https://www.cnblogs.com/chars/p/5548441.html
Copyright © 2020-2023  润新知