Sam's Notes | Sam Blog

梦想还是要有的,万一实现了呢

0%

github hexo 多说 构建自己的blog

7月5日左右搭建成功的,算比较新鲜吧:) 记录一下操作步骤,感谢前人,希望能帮到其他人。主要涉及github,hexo,多说。
github: 我想你懂得,万一你不懂,百度可以帮助你;
hexo : 博客博客模板框架 - 基于nodejs
多说 : 一个现成的评论模块,据说是国内最好的

下面每个讲讲,nodejs和git不说了。

github

首先你得有一个github的账户, ssh链接也配置好。

GitHub Pages 建立博客

GitHub Pages分两种,一种是你的GitHub用户名建立的username.github.io这样的用户&组织页(站),另一种是依附项目的pages。
建立个人的博客使用第一种,像 sam2099.github.io 。
GitHub Pages

hexo

安装Hexo

1
$ npm install -g hexo-cli

初始化

找个干净好找的地方建个文件夹hexo,然后执行

1
$ hexo init

hexo会自动建好目录和文件。

看看初始效果

在当前目录(hexo)运行,然后到浏览器输入localhost:4000看看。

1
2
$ hexo g
$ hexo s

哈哈,正常的话,可以看到了。

主题

目前来说 NexT 这个主题最符合我的口味。

  • 安装
    1
    $ git clone https://github.com/theme-next/hexo-theme-next themes/next
  • 主题配置
    themes/next目录的 _config.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    # ---------------------------------------------------------------
    # Scheme Settings
    # ---------------------------------------------------------------

    # Schemes
    #scheme: Muse
    #scheme: Mist
    scheme: Pisces
    #scheme: Gemini

    # Dark Mode
    darkmode: false

    # 菜单
    menu:
    home: / || fa fa-home
    #about: /about/ || fa fa-user
    tags: /tags/ || fa fa-tags
    categories: /categories/ || fa fa-th
    archives: /archives/ || fa fa-archive
    #schedule: /schedule/ || fa fa-calendar
    sitemap: /sitemap.xml || fa fa-sitemap
    #commonweal: /404/ || fa fa-heartbeat
    RSS: /atom.xml || fa fa-rss

    # 代码
    codeblock:
    # Code Highlight theme
    # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
    # See: https://github.com/chriskempson/tomorrow-theme
    highlight_theme: night eighties
    # Add copy button on codeblock
    copy_button:
    enable: true
    # Show text copy result.
    show_result: default
    # Available values: default | flat | mac
    style:

    # Local Search
    # Dependencies: https://github.com/theme-next/hexo-generator-searchdb
    local_search:
    enable: true


    favicon:
    small: /favicon.ico
    medium: /favicon.ico
    apple_touch_icon: /favicon.ico
    safari_pinned_tab: /favicon.ico
    #android_manifest: /images/manifest.json
    #ms_browserconfig: /images/browserconfig.xml
  • hexo 配置
    Hexo目录下的config.yml配置文件中的theme属性,将其设置为 next
    1
    theme: next

Quick Start

下面是hexo init 时生成的操作命令,够用了。
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

hexo 设置

根据自己爱好来对Hexo生成的网站进行设置了,对整站的设置,只要修改项目目录的_config.yml就可以了。
注意空格, 冒号后面一定跟一个空格;层级关系也需要空格。
我所有的 博客源文件 可以和blog对照着看。
主要设置的地方:

1
2
3
4
Site
plugins
theme
deploy

插件

RSS

安装

1
$ npm install hexo-generator-feed   --save   

配置
参考主题的 menu

sitemap

安装

1
$ npm install hexo-generator-sitemap   --save   

配置
参考主题的 menu

hexo-util

Next主题需要
安装

        npm install hexo-util  --save
        

github pages

上传到 github pages 需要
安装

    npm install hexo-deployer-git --save
    

搜索

NexT 主题自带了一个搜索功能 Local Search,即在编译文件时本地生成一个数据库,放在网站根目录下,用户借助此数据库进行搜索查询。 安装:

1
npm install hexo-generator-searchdb --save

配置
参考主题的 local_search

域名映射

在source根路径下,创建文件CNAME(无后缀,大写);内容就一行,是你需要映射的域名,比如我的

1
giveme5.top

图片缩放

启用NexT内嵌的图像缩放插件,以允许放大图像。NexT提供了两个插件:fanncybox和mediumzoom,前者功能更加强大,而后者更加轻巧所以网页加载更快,按需选择。
修改主题配置文件,如fancybox: true即可, 不要2个同时为true。

藏在最后

这是第一篇,我想这个作为笔记,有需要就可以拿出来看看,省得记载纸上找不到;所以这个大概是给自己看的。