教你10分钟搭建酷炫的个人博客

释放双眼,带上耳机,听听看~!

以个人博客为例,博客地址

准备工作

安装

$ npm install -g hexo-cli

初始化

$ hexo init <folder>
$ cd <folder>
$ npm install

创建新文章

$ hexo new \"My New Post\"

运行开发环境

$ hexo server
$ hexo s

构建

$ hexo generate
$ hexo g

部署

$ hexo deploy
$ hexo d

详细准备工作,可以查阅hexo官网

安装主题cactus,一个很程序员的主题,推荐!

目录下

git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus

相关配置,详细解释可以看官方文档

# 首页Projects的url
projects_url: https://github.com/xiaobinwu
# 设置页面方向
direction: ltr
# 首页导航
# $ hexo new page about,可以创建page页面
nav:
  home: /
  about: /about/
  articles: /archives/
  categories: /categories/
  search: /search/
# 社交链接
social_links:
  github: https://github.com/xiaobinwu
  mail: mailto:xiaobin_wu@yahoo.com
# 开启标签快捷方式
tags_overview: true
# 首页 Writing的展示条数
posts_overview:
  show_all_posts: false
  post_count: 5
  sort_updated: false
# 排列方式
archive:
  sort_updated: false
post:
  show_updated: false
# logo设置
logo:
  enabled: true
  width: 50
  height: 50
  url: /images/logo.png
  gravatar: false
# ico设置
favicon:
  desktop:
    url: /images/favicon.ico
    gravatar: false
  android:
    url: /images/favicon-192x192.png
    gravatar: false
  apple:
    url: /images/apple-touch-icon.png
    gravatar: false
# 高亮语法
highlight: kimbie.dark
# 博客主题色,dark, light, classic, white
colorscheme: dark
page_width: 48
# rss设置
rss: atom.xml
open_graph:
  fb_app_id:
  fb_admins:
  twitter_id:
  google_plus:
# disqus评论,默认不开启,需FQ
disqus:
  enabled: false
  shortname: cactus-1
# 谷歌统计
google_analytics:
  enabled: false
  id: UA-86660611-1
# 百度统计
baidu_analytics:
  enabled: false
  id: 2e6da3c375c8a87f5b664cea6d4cb29c

gravatar:
  email: xiaobin_wu@yahoo.com

valine:
  enable: true
  app_id: xxxxxx
  app_key: xxxxxxx

Valine评论系统

配置Valine,需要申请app_id,app_key

valine:
  enable: true
  app_id: xxxx
  app_key: xxxx

,写入

<% if(theme.valine.enable) { %>
    <script src=\"//cdn1.lncld.net/static/js/3.0.4/av-min.js\"></script>
    <script src=\'//unpkg.com/valine/dist/Valine.min.js\'></script>
    <div id=\"vcomments\" class=\"blog-post-comments\"></div>
    <script>
        new Valine({
            el: \'#vcomments\',
            visitor: true,
            appId: \'<%=theme.valine.app_id %>\',
            appKey: \'<%=theme.valine.app_key %>\',
            placeholder: \'ヾノ≧∀≦)o来啊,快活啊!\',
            avatar: \'robohash\'
        })
    </script>
<% } %>

自动部署hexo博客到阿里云服务器

创建仓库(远端服务器创建git仓库),可以使用ssh登入云服务器

mkdir blog.git && cd blog.git
git init --bare

Hexo配置

deploy:
  type: git
  message: update
  repo: root@xx.xxx.xx.xxx:/www/wwwroot/blog.git,master

插件安装

npm install hexo-deployer-git --save

自动部署

进入到git仓库hooks目录,并创建钩子post-receive

cd /www/wwwroot/blog.git/hooks
touch post-receive
vim post-receive

输入下面脚本:

#!/bin/bash -l
GIT_REPO=/www/wwwroot/blog.git
TMP_GIT_CLONE=/www/wwwroot/tmp/blog
PUBLIC_WWW=/www/wwwroot/blog
rm -rf ${TMP_GIT_CLONE}
mkdir ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

更改权限

chmod +x post-receive
chmod 777 -R /www/wwwroot/blog
chmod 777 -R /www/wwwroot/tmp/blog

最后部署

$ hexo g -d

给TA打赏
共{{data.count}}人
人已打赏
站长资讯

zookeeper服务发现实战及原理--spring-cloud-zookeeper源码分析

2020-11-9 3:46:16

站长资讯

asp.net core系列 42 Web 应用 分部视图

2020-11-9 3:46:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索