使用Gitee和Hexo创建自己的博客

一、安装Git与Node

(一) 安装Git

  • 在Windows下安装Git:

    在Windows上安装Git较为简单,因此不过多叙述。

  • 在Linux下安装Git:

    使用Linux包管理工具进行安装,例如Yum,sudo yum install git

  • 在Mac下安装Git:

    Git在Mac下既可以通过GUI的方式来安装也可以通过Command的方式来安装,使用Homebrew进行安装:sudo brew install git。如果没有安装HomBrew,可以参考 https://brew.sh/index_zh-cn

  • Git代理相关:
    • 查看当前的代理设置:

      git config --global http.proxy
      git config --global https.proxy
    • 设置当前代理:
      git config --global http.proxy ‘http://127.0.0.1:1080‘
      git config --global https.proxy ‘http://127.0.0.1:1080‘

      或者:

      git config --global http.proxy ‘socks5://127.0.0.1:1080‘
      git config --global https.proxy ‘socks5://127.0.0.1:1080‘
    • 删除代理:
      git config --global --unset http.proxy
      git config --global --unset https.proxy

(二) 安装Node

  • 在Windows下安装Node:

    在Windows上安装Node较为简单,因此不过多叙述。

  • 在Linux上安装Node:
    • 到NodeJs官方网站下载Linux系统的tar.gz压缩文件
    • 将文件解压到指定的目录, 这里以/home/blue/applications目录为例
      tar -xvf node-v10.16.0-linux-x64.tar.xz
      mv node-v10.16.0 /home/blue/applications
      ln -s /home/blue/applications/node /home/blue/applications/node
    • 修改可执行文件的权限:
      chmod -R 755 /home/blue/applications/node-v10.16.0
      chmod -R 755 /home/blue/applications/node
    • 执行测试
      node -v
      npm -v
  • 在Mac上安装Node:

    Node为Mac提供了GUI方式, 但是我们还可以通过HomeBrew来安装:

    sudo brew install node
  • Node相关设置:
    • 设置使用阿里NPM源:

      npm config set registry https://registry.npm.taobao.org --global
      npm config set disturl https://npm.taobao.org/dist --global

      下面是Yarn的配置(必须安装Yarn以后):

      yarn config set registry ‘https://registry.npm.taobao.org‘
    • 设置NPM缓存:
      npm config set prefix "/home/blue/applications/cache/node/prefix"
      npm config set cache "/home/blue/applications/cache/node/cache"

      还需要将/home/blue/applications/cache/node/prefix添加到PATH环境变量

    • 使用Yarn:
      npm install -g yarn

二、创建远程仓库与安装Hexo

  • 安装Hexo:sudo npm install -g hexo
  • 安装必要的插件:npm install hexo-renderer-jade hexo-renderer-stylus --save
  • 创建本地仓库
    cd ~/Code
    mkdir bluemiaomiao
    cd bluemiaomiao
    hexo init
    git init
  • 创建远程仓库
    git add remote origin <YOUR_GIT_REPO_ADDRESS>
  • 安装主题
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
    rm -rf /themes/landscape
  • Hexo的配置 _config.yml
    # 配置网站的标题
    title: 爱吃糖的蓝胖子de官方博客
    # 配置网站的子标题
    subtitle: bluemiaomiao.github.io
    # 配置网站的表述信息
    description: 一个Sre攻城狮的奋斗历程
    keywords:
    # 配置网站的作者名称
    author: BlueMiaomiao
    # 配置网站的语言为中文
    language: zh-CN
    # 配置网站的时区为中国北京时间
    timezone: Asia/Shanghai
    
    # 配置站点发布的URL地址
    url: http://bluemiaomiao.github.io
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    
    source_dir: source
    # 配置静态文件的生成目录,在Gitee部署时需要使用
    public_dir: docs
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render:
    
    new_post_name: :title.md
    default_layout: post
    titlecase: false
    external_link: true
    filename_case: 0
    render_drafts: false
    post_asset_folder: false
    relative_link: false
    future: true
    highlight:
    enable: true
    line_number: true
    auto_detect: false
    tab_replace:
    
    index_generator:
    path: ‘‘
    per_page: 10
    order_by: -date
    
    default_category: uncategorized
    category_map:
    tag_map:
    
    date_format: YYYY-MM-DD
    time_format: HH:mm:ss
    
    per_page: 10
    pagination_dir: page
    
    # 配置使用的主题
    theme: Butterfly
    
    deploy:
    type:
  • 主题的配置
    mkdir source/_data
    cp themes/Butterfly/_config.yml source/_data/_butterfly.yml
    menu:
    主页: /||fa fa-home
    时间轴: /archives/||fa fa-archive
    标签: /tags/||fa fa-tags
    分类: /categories/||fa fa-folder-open
    友链: /link/||fa fa-link
    关于: /about/||fa fa-heart
    
    favicon: /img/favicon.ico
    
    highlight_theme: pale night
    highlight_copy: true
    
    code_word_wrap: true
    
    social:
    fa fa-home: https://bluemiaomiao.gitee.io/
    fa fa-github: https://github.com/bluemiaomiao
    fa fa-gitlab: https://gitee.com/bluemiaomiao
    fa fa-plane: https://blog.51cto.com/xvjunjie
    fa fa-rocket: https://www.cnblogs.com/bluemiaomiao
    fa fa-rss: https://blog.nowcoder.net/bluemiaomiao
    
    algolia_search:
    enable: false
    hits:
        per_page: 6
    
    labels:
        input_placeholder: Search for Posts
        hits_empty: "We didn‘t find any results for the search: ${query}" # if there are no result
        hits_stats: "${hits} results found in ${time} ms"
    
    local_search:
    enable: false
    labels:
        input_placeholder: Search for Posts
        hits_empty: "We didn‘t find any results for the search: ${query}" # if there are no result
    
    mathjax:
    enable: false
    cdn: https://cdn.jsdelivr.net/npm/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML
    
    katex:
    enable: false
    cdn:
        css: https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css
    hide_scrollbar: true
    
    google_analytics:
    
    stylesheets:
    - /css/index.css
    
    scripts:
    - /js/utils.js
    - /js/main.js
    
    cdn:
    css:
        fontawesome: https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css
        googlefont: https://fonts.googleapis.com/css?family=Titillium+Web
        fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.css
    js:
        jquery: https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
        fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.js
        js-cookies: https://cdn.jsdelivr.net/npm/[email protected]/src/js.cookie.min.js
        lozy: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
    
    avatar: /img/avatar.png
    
    top_img: /img/year-28.jpg
    
    post_img: https://cdn.jsdelivr.net/gh/jerryc127/[email protected]/Photo/post.png
    
    default_cover: https://cdn.jsdelivr.net/gh/jerryc127/[email protected]/cover/default_bg.png
    
    archive_img: https://cdn.jsdelivr.net/gh/jerryc127/[email protected]/Photo/archive.jpg
    
    lodding_bg:
    flink: /img/friend_404.gif
    post_page: /img/404.jpg
    
    post_meta:
    date_type: both
    categories: true
    tags: true
    
    wordcount:
    enable: true
    
    toc:
    enable: true
    number: false
    
    auto_open_sidebar:
    enable: false
    
    post_copyright:
    enable: true
    license: CC BY-NC-SA 4.0
    license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
    
    auto_excerpt:
    enable: true
    length: 150
    
    addThis:
    enable: false
    pubid:
    
    sharejs:
    enable: true
    sites: facebook,twitter,wechat,weibo,qq
    
    addtoany:
    enable: false
    item:
        - facebook
        - twitter
        - wechat
        - sina_weibo
        - facebook_messenger
        - email
        - copy_link
    
    disqus:
    enable: false
    shortname: 
    
    valine:
    enable: false
    appId:
    appKey:
    notify: false
    verify: false
    pageSize: 10
    avatar: monsterid
    lang: en # i18n: zh-cn/en/tw
    placeholder: Please leave your footprints
    guest_info: nick,mail,link
    
    since: 2016
    
    footer_custom_text: 技术成就梦想, 实力铸就辉煌
    
    footer_copyright:
    enable: true
    
    ICP:
    enable: false
    url:
    text:
    
    # 关闭数据统计功能
    busuanzi:
    site_uv: false
    site_pv: false
    page_pv: false
    
    google_site_verification:
    
    bing_site_verification:
    
    baidu_site_verification:
    
    qihu_site_verification:
    
    # 友情链接基础信息
    Flink:
    headline: 友情链接
    info_headline: 开始认识博主
    name: BlueMiaomiao
    address: bluemiaomiao.gitee.io
    avatar: https://jerryc.me/img/avatar.png
    info: 技术成就梦想, 实力铸就辉煌
    comment: 添加友链请留言
    
    # 是否显示整站运行的时间
    runtimeshow:
    enable: true
    start_date: 12/02/2016 12:30:00
    
    # 是否支持夜间模式
    nightshift:
    enable: true
    
    activate_power_mode:
    enable: false
    
    # 网站公告
    announcement:
    content: 博主邮箱:[email protected]/[email protected]
    
    # 是否打开文章赞赏功能
    reward:
    enable: true
    QR_code:
        - itemlist:
            img: /img/wechat-me.jpg
            text: 微信
        - itemlist:
            img: /img/alipay-me.jpg
            text: 支付宝
    
    # 文章自动推荐功能
    related_post:
    enable: false
    limit: 6
    
    canvas_ribbon:
    enable: false
    size: 150
    alpha: 0.6
    zIndex: -1
    click_to_change: false
    
    # 开启背景飘带功能
    canvas_ribbon_piao:
    enable: true
    
    # 避免网址重复SEO
    canonical: true
    
    # 禁止百度转码
    disable_baidu_transformation: true
    
    twitter_meta: true
    Open_Graph_meta: true
    
    # 阅读模式
    readmode:
    enable: true
    
    # 开启字体支持
    font:
    enable: false
    font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,"Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
    code-font: consolas, Menlo, "PingFang SC", "Microsoft JhengHei","Microsoft YaHei", monospace, Helvetica Neue For Number
    
    # 水平分割线
    hr:
    enable: true
    icon: ‘\f21c‘
    icon-top: -20px
    
    # 主页子标题
    subtitle:
    enable: true
    sub1: 技术成就梦想, 实力铸就辉煌
    sub2: bluemiaomiao.gitee.io
    
    # 侧边功能模块设置
    aside:
    card_author: true
    card_announcement: true
    card_recent_post: true
    card_categories: true
    card_tags: true
    card_archives: true
    card_webinfo: false
    
    # 中文繁体假体自动转换
    translate:
    enable: true
    # 默认显示的语言
    default: 简
    #网站默认语言,1: 繁體中文, 2: 简体中文
    defaultEncoding: 2
    #延迟时间,若不在前, 要设定延迟翻译时间, 如100表示100ms,默认为0
    translateDelay: 0
    #博客网址
    cookieDomain: "https://bluemiaomiao.gitee.io/"
    #当文字是简体时,按钮的文本
    msgToTraditionalChinese: "繁"
    #当文字是繁体时,按钮的文本
    msgToSimplifiedChinese: "简"
    
    # 鼠标点击效果
    fireworks:
    enable: true
    
    #百度推送
    baidu_push:
    enable: false
  • 主题安装配置文档:https://jerryc.me/posts/21cfbf15/
  • 生成静态页面:hexo g
  • 预览静态页面:hexo s
  • 发布静态页面:
    git add .
    git commit -m "init"
    git push origin masters
  • 创建与gitee用户名相同的代码仓库,启用Gitee Pages服务,发布master分支的docs目录
  • 使用浏览器访问:https://<YOUR_USERNAME>.gitee.io

Gitee的Pages服务是一个近实时的Httpd服务,Hexo生成的文章即使发布到代码仓库,也不一定通过浏览器进行显示,一般会有30分钟的延迟。

三、常用Hexo命令

(一)常用命令

  • hexo new "postName" #新建文章
  • hexo new page "pageName" #新建页面
  • hexo generate #生成静态页面至public目录
  • hexo server #开启预览访问端口(默认端口4000,‘ctrl + c‘关闭server)
  • hexo deploy #部署到GitHub
  • hexo help # 查看帮助
  • hexo version #查看Hexo的版本

(二)简化命令

  • hexo n == hexo new
  • hexo g == hexo generate
  • hexo s == hexo server
  • hexo d == hexo deploy

(三)组合命令

  • hexo s -g #生成并本地预览
  • hexo d -g #生成并上传

原文地址:https://blog.51cto.com/xvjunjie/2424227

时间: 2024-10-10 10:43:47

使用Gitee和Hexo创建自己的博客的相关文章

《Hexo+github搭建个人博客》

<Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+github搭建个人博客>1 思维导图总览:2 What?2 简介:2 Hexo:2 NodeJs2 Github4 Git5 Github page:5 Markdown6 How?7 环境配置:7 安装Git8 安装Node.js9 安装hexo13 第一步:打开cmd.13 第二步:进入NodeJS

hexo搭建github静态博客

具体效果github不仅能免费提供代码托管,此外还提供了创建github博客的功能,网上有jekyll的方法,之前我试过最终由于Ubuntu下安装ruby及其他组建失败没成功,过程也比较繁琐,但有另一种方法,操作起来很简单,而且达到的效果也很好,那就是通过hexo搭建github博客.搭建环境为window, 步骤 1.安装git客户端,以及github账号:通过gitBash 生成ssh key,将公钥加入到github中,具体方法,百度搜索:为gthub配置ssh key.2.登陆githu

github+hexo搭建自己的博客网站(七)注意事项(避免read.me,CNAME文件的覆盖,手动改github page的域名)

详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定域名可以查看:http://www.chengxinsong.cn 可以查看在github上生成的静态文件(如果觉得可以请给颗星星):https://github.com/saucxs/saucxs.github.io.git 注意1:怎么避免 .md 文件被解析? Hexo原理就是hexo在执行hexo generate时会在本地先把博客生成的一套静态站点放到public文件夹中,在执行hexo depl

使用hexo搭建github个人博客网站

搭建步骤: 1>Mac或win电脑一台,本文以mac为例. 2>下载安装Git和Node 3>安装hexo 4>注册登录GitHub,创建一个仓库,库名格式为:GitHub用户名.github.io 5>购买域名,本文以阿里云为例,解析域名. 6>博客主题,标题,界面设置 安装Git 下载地址:https://git-scm.com/download/ 安装Node 下载地址:http://nodejs.cn/download/ 验证是否安装成功: 安装hexo //安

使用Node.js+Hexo+Github搭建个人博客(续)

一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在上篇博文的基础上分别从以下几个方面做简单的后续介绍: 博客相关配置介绍 博客主题 Yilia 配置介绍 如何制作并配置网站缩略图 如何将博客同步到 Github.Coding 中 如何使用 Git 同步 Github 与 Coding 的代码 如何申请域名并作域名解析 如何将域名绑定至 Github.Codi

Hexo+NexT(一):在Windows下安装Hexo+NexT及搭建博客

阅读本篇之前,假定读者已经有了Node.js的基础,如需要补充Node.js知识的,请自行百度. Hexo是在Node.js框架下的一个项目,利用Node.js提供的强大功能,完成从Markdown到静态网页的转换. NexT是Hexo项目下的一个主题插件,提供可高度定制的页面外观. Hexo博客专题索引页 1. 我们要做什么 搭建Node.js环境 下载Hexo项目 下载NexT的主题插件 运行博客 2. 在Windows系统下安装Node.js 在Windows下,Node.js的核心是命令

使用git+hexo部署自己的博客

目录 git与node.js的安装配置 hexo常用命令 在本地部署博客 通过Git Hub将博客部署到远端服务器 拓展 更新博客 记录自己的博客部署过程. 使用hexo+git部署博客. 参考视频:手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo 视频作者: CodeSheep git与node.js的安装配置 git的安装 官方下载地址 git若从官方下载的话下载速度过慢且下载时间过长可能会出现下载失败等问题,因此推荐从镜像网站下载git.如淘宝npm的镜像. 国内镜像下载

Ubuntu+Hexo+Github搭建个人博客

目录 目录 目录 1. 简介 环境 2. Git安装及配置 2.1 安装Git 2.2 创建Git仓库 2.3 配置git仓库 2.4 添加公钥 3. Node安装 4. Hexo安装及配置 4.1 安装hexo 4.2 初始化hexo文件夹 4.3 Hexo操作 4.4 将git库和hexo链接起来 5. 更换主题 6. 博客迁移 6.1 常规迁移 6.2 特殊情况 1. 简介 以前部署的Hexo博客是在Windows上搭建的,在Windows系统使用很方便,碰到一些问题也都能够解决:现在安装

github+hexo搭建自己的博客网站(六)进阶配置(搜索引擎收录,优化你的url)

详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clone,运行,看到博客演示.觉得可以给颗星星):https://github.com/saucxs/hexo-blog-origin.git 一.搜索引擎收录 1.验证网站所有权 登录百度站长平台:http://zhanzhang.baidu.com,只要有百度旗下的账号就可以登录,登录成功之后在站点