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)
  • 相关阅读:
    Hibernate总结(二)---hibernate中的各种映射
    调度子系统7_负载均衡(四)
    (网络层: 二 ) 网络层提供的服务(基于无连接的服务)
    我的2013——一名计算机教师的高开低走
    文艺小青年
    图解RabbitMQ
    解决Mac下idea运行速度慢
    较主流的消息队列的比较与选型
    Ubuntu下RabbitMQ安装
    linux守护进程与&的区别
  • 原文地址:https://www.cnblogs.com/VVingerfly/p/10699331.html
Copyright © 2011-2022 走看看