使用hexo+coding搭建免费个人博客

程序员文章站 2022-03-17 11:45:26

1.检测node和npm 先检测一下有没有 node.js 和 npm 2.安装hexo 在git bash中运行以下命令安装hexo 安装hexo全局建立文件夹然后运行就能够建立起一个本地的服务器，端口是4000，打开浏览器 http://localhost:4000 就能访问属于你自己的博 ......

1.检测node和npm

先检测一下有没有node.js和npm

$ node -v
//如果有，说明node.js安装成功！
$ node -v
v8.4.0
//如果有，说明npm安装成功！
$npm -v
$ npm -v
5.3.0

使用hexo+coding搭建免费个人博客

2.安装hexo

在git-bash中运行以下命令安装hexo

安装hexo全局

$ npm install -g hexo-cli

建立文件夹

hexo init blog
cd blog
npm install

然后运行
$ npm install

就能够建立起一个本地的服务器，端口是4000，打开浏览器就能访问属于你自己的博客了。

使用hexo+coding搭建免费个人博客

3.切换主题

主题代码拷贝

主题的拷贝也是直接使用 git 即可，首先进入到你博客的根目录，再打开 git-bash 运行

git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

在博客根目录下找到 _config.yml 文件，找到里面的 theme，改为

theme: next

这时再运行一次 hexo s ，看看主题有没有生效吧。

4.发布到coding

前提是你先注册一个账号

hexo 提供了一个部署命令 hexo deploy，首先需要安装一下 hexo-deployer-git插件

npm install hexo-deployer-git --save

然后配置一下_config.yml 文件：

deploy:
  type: git 
  repoistory: https://git.coding.net/codinggq/problog.git
  branch: master

预览效果

在 coding 上建立一个私人仓库，找到代码的 coding 地址，填好上面的配置，然后直接执行

hexo deploy

不出意外的话会让你填写 coding 的用户名和密码完成上传操作。如果你有配置 ssh 方式的话就更加方便了。

这个时候再到 coding 对应的项目里面打开 pages 服务，根据 coding 建议，因为不是 jekyll 项目，所以需要再新建一个.nojekyll 文件（空文件就行，其实不建立也行），等上一会就能够访问自己的博客了。

最后运行以下命令上传到coding

$ hexo g
$ hexo d

如果不行用git,输入以下命令

mkdir problog
cd problog
git init
echo "# problog" >> readme.md
git add readme.md
git commit -m "first commit"
git remote add origin https://git.coding.net/codinggq/problog.git
git push -u origin master

next主题配置文件示例:

# ---------------------------------------------------------------
# site information settings
# ---------------------------------------------------------------

# put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico

# set default keywords (use a comma to separate)
keywords: "观奇笔记"

# set rss to false to disable feed link.
# leave rss as empty to use site's feed link.
# set rss to specific value if you have burned your feed already.
rss:

# specify the date when the site was setup
#since: 2015




# ---------------------------------------------------------------
# menu settings
# ---------------------------------------------------------------

# when running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
  home: /
  # categories: /categories
  about: /about
  archives: /archives
  # tags: /tags
  commonweal: /404.html


# enable/disable menu icons.
# icon mapping:
#   map a menu item to a specific fontawesome icon name.
#   key is the name of menu item and value is the name of fontawsome icon. key is case-senstive.
#   when an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
  enable: true
  #keymapstomenuitemkey: nameoftheiconfromfontawesome
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat




# ---------------------------------------------------------------
# scheme settings
# ---------------------------------------------------------------

# schemes
#scheme: muse
scheme: mist
#scheme: pisces


# ---------------------------------------------------------------
# font settings
# - find fonts on google fonts (https://www.google.com/fonts)
# - all fonts set here will have the following styles:
#     light, light italic, normal, normal intalic, bold, bold italic
# - be aware that setting too much fonts will cause site running slowly
# - introduce in 5.0.1
# ---------------------------------------------------------------
font:
  enable: true

  # uri of fonts host. e.g. //fonts.googleapis.com (default)
  host:

  # global font settings used on <body> element.
  global:
    # external: true will load this font family from host.
    external: true
    family: monaco,"pingfang sc",sans-serif,"microsoft yahei"

  # font settings for headlines (h1, h2, h3, h4, h5, h6)
  # fallback to `global` font settings.
  headings:
    external: true
    family:

  # font settings for posts
  # fallback to `global` font settings.
  posts:
    external: true
    family:

  # font settings for logo
  # fallback to `global` font settings.
  # the `size` option use `px` as unit
  logo:
    external: true
    family: lobster two
    size: 24

  # font settings for <code> and code blocks.
  codes:
    external: true
    family: monaco,consolas, menlo,
    size: 16




# ---------------------------------------------------------------
# sidebar settings
# ---------------------------------------------------------------


# social links
# key is the link label showing to end users.
# value is the target link (e.g. github: https://github.com/iissnan)
social:
  github: https://github.com/hardesyy
  微博: http://weibo.com/hardesyy
  知乎: https://www.zhihu.com/people/fengjun17


# social links icons
# icon mapping:
#   map a menu item to a specific fontawesome icon name.
#   key is the name of the item and value is the name of fontawsome icon. key is case-senstive.
#   when an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
  enable: true
  # icon mappings.
  # keymapstosocalitemkey: nameoftheiconfromfontawesome
  github: github
  微博: weibo
  知乎: weibo


# sidebar avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
#avatar:


# table of contents in the sidebar
toc:
  enable: true

  # automatically add list number to toc.
  number: true


# creative commons 4.0 international license.
# http://creativecommons.org/
# available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#creative_commons: by-nc-sa
#creative_commons:


sidebar:
  # sidebar position, available value: left | right
  position: left
  #position: right

  # sidebar display, available value:
  #  - post    expand on posts automatically. default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggler.
  display: post
  #display: always
  #display: hide
  #display: remove


# blogrolls
links_title: links
#links_layout: block
#links_layout: inline
links:
  刘洋: http://www.lyblog.net/
  廖雪峰: http://www.liaoxuefeng.com/
  阮一峰: http://www.ruanyifeng.com/blog/
  fed: http://taobaofed.org/
  fex: http://fex.baidu.com/
  奇舞团: http://www.75team.com/
  alloyteam: http://www.alloyteam.com/
  cdc: http://cdc.tencent.com/
  isux: http://isux.tencent.com/
  tgideas: http://tgideas.qq.com/
  nodejs api: http://nodeapi.ucdok.com/

# ---------------------------------------------------------------
# misc theme settings
# ---------------------------------------------------------------

# custom logo.
# !!only available for default scheme currently.
# options:
#   enabled: [true/false] - replace with specific image
#   image: url-of-image   - images's url
custom_logo:
  enabled: true
  image: https://coding.net/static/project_icon/scenery-15.png


# code highlight theme
# available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties


# automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true


# automatically excerpt. not recommand.
# please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: false
  length: 150


# wechat subscriber
#wechat_subscriber:
  #enabled: true
  #qcode: /path/to/your/wechatqcode ex. /uploads/wechat-qcode.jpg
  #description: ex. subscribe to my blog by scanning my public wechat account

# 打赏
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /uploads/wxpay.png
alipay: /uploads/alipay.jpg


# ---------------------------------------------------------------
# third party services settings
# ---------------------------------------------------------------

# mathjax support
mathjax:
  enable: false
  cdn: //cdn.mathjax.org/mathjax/latest/mathjax.js?config=tex-ams-mml_htmlormml


# swiftype search api key
#swiftype_key:

# baidu analytics id
#baidu_analytics:

# duoshuo shortname
duoshuo_shortname: "fengjun"

# disqus
#disqus_shortname:

# baidu share
# available value:
#    button | slide
#baidushare:
##  type: button

# share
#jiathis:
#add_this_id:

# share
duoshuo_share: true

# google webmaster tools verification setting
# see: https://www.google.com/webmasters/
#google_site_verification:


# google analytics
#google_analytics:

# cnzz count
#cnzz_siteid:


# make duoshuo show ua
# user_id must not be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: true
  user_id: 0
  admin_nickname: "冯教授"


# facebook sdk support.
# https://github.com/iissnan/hexo-theme-next/pull/410
facebook_sdk:
  enable: false
  app_id:       #<app_id>
  fb_admin:     #<user_id>
  like_button:  #true
  webmaster:    #true

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

# show number of visitors to each article.
# you can visit https://leancloud.cn get appid and appkey.
leancloud_visitors:
  enable: true
  app_id: "icbw7onyytapaof6yjfe7a1m-gzgzohsz"
  app_key: "uclxpv0g8ebku9lnqod5xx1b"

# show pv/uv of the website/page with busuanzi.
# get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: false
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:

# tencent analytics id
tencent_analytics: "59595400"

# enable baidu push so that the blog will push the url to baidu automatically which is very helpful for seo
baidu_push: true



#! ---------------------------------------------------------------
#! do not edit the following settings
#! unless you know what you are doing
#! ---------------------------------------------------------------

# motion
use_motion: true

# fancybox
fancybox: true

# since
since: 2013

# wechat subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 扫一扫,关注我！


# script vendors.
# set a cdn address for the vendor you want to customize.
# for example
#    jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
# be aware that you should use the same version as internal ones to avoid potential problems.
vendors:
  # internal path prefix. please do not edit it.
  _internal: vendors

  # internal version: 2.1.3
  jquery:

  # internal version: 2.1.5
  # http://fancyapps.com/fancybox/
  fancybox:
  fancybox_css:

  # internal version: 1.0.6
  # https://github.com/ftlabs/fastclick
  fastclick:

  # internal version: 1.9.7
  # https://github.com/tuupola/jquery_lazyload
  lazyload:

  # internal version: 1.2.1
  # http://velocityjs.org
  velocity:

  # internal version: 1.2.1
  # http://velocityjs.org
  velocity_ui:

  # internal version: 0.7.9
  # https://faisalman.github.io/ua-parser-js/
  ua_parser:

  # internal version: 4.4.0
  # http://fontawesome.io/
  fontawesome:


# assets
css: css
js: js
images: images

# theme version
version: 5.0.1

5.写在最后

这是一种比较经济实惠的搭建专属于自己个人博客的方法。

最后，祝愿大家程序员节日快乐！

使用hexo+coding搭建免费个人博客

上一篇：小米8的发布,让我觉得又回到了8年前的“小米手机”

下一篇：对人工智能的十大误解：人类将被超级AI毁灭？

使用hexo+coding搭建免费个人博客

1.检测node和npm

2.安装hexo

安装hexo全局

建立文件夹

3.切换主题

主题代码拷贝

启用主题

4.发布到coding

next主题配置文件示例:

5.写在最后

怎样建博客网站（教你免费搭建个人博客步骤）

怎样建博客网站（教你免费搭建个人博客步骤）

利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一)

利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)

利用ASP.NET MVC+Bootstrap搭建个人博客之打造清新分页Helper（三）

利用ASP.NET MVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)

利用ASP.NET MVC和Bootstrap快速搭建个人博客之后台dataTable数据列表

利用ASP.NET MVC和Bootstrap快速搭建个人博客之文章打赏功能（六）

什么是博客怎样开通（个人博客建立搭建）

从零开始搭建前后端分离的NetCore2.2（EF Core CodeFirst+Autofac）+Vue的项目框架之七使用JWT生成Token(个人见解)