zoukankan      html  css  js  c++  java
  • 基于Hexo搭建个人博客网站

     
    ## 准备工作
    首先下载[nodejs](https://nodejs.org/en/download/),一路next安装即可。验证是否安装成功:
    ```bash
    node -v # 输出 v10.15.1
    npm -v # 输出 6.8.0
    ```
    接下来更改npm的安装源,这能大大加快安装包的速度。
    ```bash
    npm get registry # 输出默认源 https://registry.npmjs.org/
    npm config set registry http://registry.npm.taobao.org
    npm get registry # 输出 http://registry.npm.taobao.org/,说明已更改为淘宝源
    ```

    再运行`npm install hexo-cli -g`。

    如果出现`permission error`,不要急着用`sudo npm install hexo-cli -g`,运行命令
    `sudo chown -R 'whoami' /usr/local/lib/node_modules`,`'whoami'`即你的用户名,通过`whoami`命令查看。
    然后再运行`npm install hexo-cli -g`。

    验证是否安装成功,命令行输入`node -v`,输出hexo-cli等众多包即对应的版本则OK。


    ## 创建本地博文服务
    在本地新建你的博客文件夹如`blog_hexo`,进入该文件夹执行下列命令:
    ```bash
    hexo init
    npm install
    hexo server
    ```
    此时访问[http://localhost:4000](http://localhost:4000)就能打开博文了,`Ctrl+C`关闭服务器。

    ### 添加新页面
    如要添加tags页面,首先运行下面命令
    ```sh
    hexo new page tags
    ```
    这时会在`sources/tags`里面生成`index.md`的文件,打开这个文件编辑,添加`type: tags`,即
    ```
    ---
    title: tags
    date: 2016-11-11 21:40:58
    type: tags
    ---
    ```
    最后再在主题配置文件中,在menu项下,把tags页打开。
    ```
    menu:
    home: / || home
    archives: /archives/ || archive
    tags: /tags/ || tags
    ```

    ### emoji支持
    Hexo默认是采用hexo-renderer-marked,这个渲染器不支持插件扩展,还有一个支持插件扩展的是 hexo-renderer-markdown-it,可以使用这个渲染引擎来支持emoji表情,具体实现过程如下:
    首先进入blog跟目录,执行如下命令
    ```sh
    npm un hexo-renderer-marked --save
    npm i hexo-renderer-markdown-it --save
    ```
    再安装emoji插件,执行如下命令
    ```sh
    npm install markdown-it-emoji --save
    ```
    最后再编辑站点配置文件,就是编辑根目录的_config.yml文件,添加如下内容
    ```yml
    # Markdown-it config
    ## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
    markdown:
    render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
    plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-emoji # add emoji
    anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ¶
    ```


    ## 关联github
    首先在GitHub中新建`username.github.io`仓库,其中`username`为自己的用户名。
    再进入blog_hexo根目录,安装`npm install hexo-deployer-git --save`,然后打开根目录下的_config.yml,拉到最下面, 修改Deployment设置:
    ```
    # Deployment
    ## Docs: http://hexo.io/docs/deployment.html
    deploy:
    type: git
    repository: https://github.com/username/username.github.io
    branch: master
    ```
    再进入根目录执行如下命令
    ```bash
    hexo clean
    hexo generate
    hexo deploy
    ```
    第一次上传可能会让你输入git的用户名和密码。
    如果成功,就可以打开`http://username.github.io`,`username`替换成自己用户名。


    ## Hexo命令

    ### 常用命令
    ```bash
    hexo n '文章名' == hexo new '文章名' #新建文章
    hexo g == hexo generate #生成静态页
    hexo d == hexo deploy #部署发布 #可与hexo g合并为hexo d -g
    ```
    ### 服务器
    ```bash
    hexo s == hexo server # Hexo会监视文件变动并自动更新,您无须重启服务器。
    hexo s -s #静态模式
    hexo s -p 5000 #更改端口
    hexo s -i 192.168.1.1 #自定义 ip
    ```
    ### 模板
    ```bash
    hexo n '文章名' #新建文章
    hexo n page '页面名' #新建页面
    hexo n photo '页面名' #新建photo页面
    ```


    ## 参考
    - [Hexo](https://hexo.io/zh-cn/)
    - [awesome-hexo](https://github.com/hexojs/awesome-hexo)
    - [Hexo部署github博客](https://blog.csdn.net/zhengyong15984285623/article/details/82380735?utm_source=blogxgwz5)
    - [亲测Hexo+Github个人博客搭建](http://blog.51cto.com/13872978/2318972?source=dra)
    - [HEXO+Github,搭建属于自己的博客](https://wenlisu.github.io/HEXO+Github%EF%BC%8C%E6%90%AD%E5%BB%BA%E5%B1%9E%E4%BA%8E%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2.html)
    - [搭建Hexo博客进阶篇--API和一些小部件(四)](https://www.jianshu.com/p/57e22584b277)
    - [使用hexo+github搭建免费个人博客详细教程](https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html)
  • 相关阅读:
    LeetCode 453 Minimum Moves to Equal Array Elements
    LeetCode 112 Path Sum
    LeetCode 437 Path Sum III
    LeetCode 263 Ugly Number
    Solutions and Summay for Linked List Naive and Easy Questions
    AWS–Sysops notes
    Linked List
    All About Linked List
    datatable fix error–Invalid JSON response
    [转]反编译c#的相关问题
  • 原文地址:https://www.cnblogs.com/VVingerfly/p/10699331.html
Copyright © 2011-2022 走看看