你该有一个属于自己的个人博客了
前言
周末用了不到一天时间搭建了属于自己的博客，欣喜之余，就想着提笔将个人博客搭建的详细过程记录下来，以便分享给众读者使用；
搭建之前，笔者看过其他博客的搭建教程，上面都提到可以在短短几分钟搭建好自己的博客。
从搭建到博客访问确实只需要几分钟的时间，但几分钟的工作并未达到我们的预期，需要优化的时间可不止几分钟。遗憾的是，那些教程并没有将博客优化过程可能遇到的坑提及出来。因此，本文有必要补充一下。
个人博客的好处
- 自由：我的地盘我做主，游戏的规则我来定，想想都很爽。文章的内容、格式、布局都可在自己的掌控范围内，不收其他博客平台的限制；
- 个性：现在提倡是创新，需要的是特色与个性，这样才能突显出自己的与众不同。要学会打造属于自己的品牌，分享自己对同一事物的不同看法。Ta,给了你展示个性的机会；
个人博客，走起
个人博客方案选择
- 笔者选择的是GitHubPages + Hexo+Next，一种简单高效的实现方式，当然还有其他的实现方式，如：WordPress、GitHubPages + Jekell等等。
创建Github仓库
- 在浏览器输入Github网址;
- 登录或者注册；
- 点击下图所示的
New repository:
- 填写仓库名称：注意 Respository name 中一定要输入：你的用户名.github.io,然后点击”Create repository“ 按钮完成创建即可。我尝试过在这填写过：不是用户名.github.io,最终的后果是显示404页面。故，读者在这略微留意一下。具体如下图所示：
本地环境的准备工作
- 笔者使用的是Mac系统，主要以Mac操作进行讲解；
Git安装
- Git已帮大家下载好了，只需去百度云下载一份安装即可，也可去Git官网下载；
Nodejs安装
- 两种方式：其一去百度云下载一份直接安装；其二去Nodejs官网下载。
- 说明：Nodejs也可使用Nodejs版本管理器nvm安装，考虑其安装过程中存在的问题较多，操作流程也多，笔者不推荐大家使用这种方式安装。此处就不列举其安装方式。
Hexo安装
- 打开终端，输入Hexo的安装命令：
npm install hexo-cli -g
若此命令安装不成功时，可输入下面的命令和开机密码继续完成安装：
sudo npm install hexo-cli -g
- 打开终端，定位到你希望存储博客的目录下，如下所示：
- 执行Hexo命令，初始化本地博客仓库：
hexo init 你的用户名.github.io // 尽量和Github仓库使用同一个名称
博客效果预览
- 上述步骤完成后，基本的博客框架就已经搭建完了，Hexo安装完成后默认使用landscape主题；
- 在终端定位到xxx.github.io文件夹下，并在终端输入下面的命令就能启动服务预览功能；
hero s
- 在浏览器上输入网址：http://localhost:4000/，就能预览到landscape主题下的博客效果，具体如图：
- 如果你觉得这个主题很合心意，就可以默认使用这个主题，若不满意，那就继续向下看吧。
Next主题安装
- Next主题是iissnan所创作的一个Hexo主题，以简洁为主；
- 开始安装主题之前，可以打开xxx.github.io文件，将此文件夹中的themes移除掉，当然你可以在安装过程中直接替换掉；
- 安装：在终端定位到xxx.github.io目录下，执行下面的命令后，稍等片刻，主题就下载到对应的位置；
cd xxx.github.io
git clone https://github.com/iissnan/hexo-theme-next themes/next
博客的站点配置
# Hexo Configuration## Docs: https://hexo.io/docs/configuration.html## Source: https://github.com/hexojs/hexo/# Sitetitle: 最晚的开始 #站点名称subtitle: 所有的为时已晚都是开始的最好时候 #副标题#个人描述description: My goal is not write code.if we could ship products and make all this money without writing any code,we could.Your job is ship products EXACTLY on time.It doesn’t matter whether you are a developer,tester,program manager,product manager whatever.Everybody’s job is the same. author: Jack_lin #作者language: zh-Hans #语言timezone:# URL #绑定域名后，要创建 sitemap.xml 时再配置该项 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'url: http://yoursite.comroot: /permalink: :year/:month/:day/:title/permalink_defaults:# Directory #目录不用修改source_dir: sourcepublic_dir: publictag_dir: tagsarchive_dir: archivescategory_dir: categoriescode_dir: downloads/codei18n_dir: :langskip_render:# Writing# 文章布局、写作格式的定义，不修改new_post_name: :title.md # File name of new postsdefault_layout: posttitlecase: false # Transform title into titlecaseexternal_link: true # Open external links in new tabfilename_case: 0render_drafts: falsepost_asset_folder: falserelative_link: falsefuture: truehighlight:enable: trueline_number: trueauto_detect: falsetab_replace:# Category & Tagdefault_category: uncategorizedcategory_map:tag_map:# Date / Time format #时间格式不用修改## Hexo uses Moment.js to parse and display date## You can customize the date format as defined in## http://momentjs.com/docs/#/displaying/format/date_format: YYYY-MM-DDtime_format: HH:mm:ss# Pagination #每页显示文章数，可以自行定义## Set per_page to 0 to disable paginationper_page: 10pagination_dir: page# Extensions#配置站点时，所使用的主题和插件，切换主题可以在这里设置## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next# theme: landscape# 头像， 在xxx.github.io/source 下相对路径，若source文件夹下没有uploads，就新建一个名为uploads文件夹，具体见下面截图avatar: /uploads/images/avatar.png# Deployment#这里是部署到Github上的设置## Docs: https://hexo.io/docs/deployment.htmldeploy:type: git #git提交repo: https://github.com/123sunxiaolin/123sunxiaolin.github.io.git #已创建的Github仓库branch: master #提交到的分支
博客的Next主题配置
- 主题配置文件：需要与之前讲过的站点配置文件进行区分，站点配置文件在xxx.github.io/_config.yml目录；
- 主题配置文件在xxx.github.io/themes/next/_config.yml目录下；
- 关于主题可配置的选项略多，故采取分条讲解的形式，具体如下：
1、设置关键字
# Set default keywords (Use a comma to separate)
keywords: “iOS, 程序猿, 文艺小青年” #修改
2、设置博客的开始时间
# Specify the date when the site was setup#since: 2016 #设置博客的开始时间
3、菜单栏的设置
# ------------------------------------------------ ---------------# Menu Settings# ---------------------------------------------------------------# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)menu: #- 修改home: / #在菜单上显示首页 archives: /archives //设置显示归档categories: /categories // 设置显示分类tags: /tags //设置显示标签about: /about //设置显示关于#commonweal: /404.html
4、菜单栏的图标设置：可从Font Awesome 网站查询图标对应的名称填入到对应的菜单项即可
#设置菜单的图标，规则为：菜单（左）：图标名（右）menu_icons: enable: true#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesomehome: homeabout: usercategories: thtags: tagsarchives: archivecommonweal: heartbeat
5、设置博客的外观
# Schemes#scheme: Muse #默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白#scheme: Mist #Muse 的紧凑版本，整洁有序的单栏外观scheme: Pisces #双栏 Scheme，当然也是我选择的
# Social Links# Key is the link label showing to end users.social:GitHub: https://github.com/123sunxiaolinWeibo: http://weibo.com/JacklinIOS/profile?rightmod=1&wvr=6&mod=personinfo#JianShu: http://www.jianshu.com/users/ef991f6d241c/latest_articles#设置社交链接对应的图标social_icons:enable: true# Icon Mappings. - 修改KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesomeGitHub: githubTwitter: twitterWeibo: weibo#JianShu: heartbeat# Blogrolls -设置友情链接links_title: Links#links_layout: block#links_layout: inlinelinks:Jack_lin简书: http://www.jianshu.com/users/ef991f6d241c/latest_articles
7、设置侧栏的头像
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
avatar: /images/avatar.jpg #修改 - 侧滑栏头像，可参考站点配置文件中关于头像的设置
- 注意一点使用next主题时，侧栏头像只能存储在主题目录下images文件夹里
8、设置侧栏的方向（设置成左侧）
sidebar:# Sidebar Position, available value: left | rightposition: left#position: right
9、设置博客中代码高亮显示
# Code Highlight theme# Available value:# normal | night | night eighties | night blue | night bright# https://github.com/chriskempson/tomorrow-theme# highlight_theme: normal# 代码高亮主题highlight_theme: night eighties
10、设置微信支付宝赞赏功能
# 打赏配置
# 打赏说明文本
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
# 微信收款二维码
wechatpay: /uploads/images/wechat-reward-image.png
# 支付宝收款二维码
alipay: /uploads/images/alipay-reward-image.png
11、设置微信公众号订阅
# Wechat Subscriber - 微信订阅
wechat_subscriber:
enabled: true
qcode: /uploads/images/wechat-qcode.jpg
description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！
12、添加网页计数器-不蒜子
# 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: true
# 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:
创建分类界面
- 打开终端，定位到xxx.github.io目录下；
- 执行下面的命令，新建一个名为categories的页面；
hexo new page categories
创建完成后，在对应的目录下找到index.md文件，进行如下的修改：
title: categories
date: 2016-08-20 22:17:49
type: “categories” # 将页面的类型设置为 categories,主题将自动为这个页面显示所有分类
comments: false
创建标签界面
- 打开终端，定位到xxx.github.io目录下；
- 执行下面的命令，新建一个名为tags的页面；
hexo new page tags
创建完成后，在对应的目录下找到index.md文件，进行如下的修改：
title: tags
date: 2016-08-20 22:17:49
type: “tags” # 将页面的类型设置为 tags,主题将自动为这个页面显示为标签云
comments: false- 上述创建的分类和标签界面是主题自动维护的，用户只需要按照规则书写文章即可。
如何写和发布博客
- 主要使用的Markdown语法写文章，推荐Mac上使用Mou编辑软件，可带查看其语法帮助；
在文章开头需要添加一些配置，如下：
title: 个人博客搭建详解（Windows和Mac通用版） # 这是标题
categories: # 这里写的分类会自动汇集到 categories 页面上，分类可以多级- 博客站教程
- 个人博客书写
tags: # 这里写的标签会自动汇集到 tags 页面上 - 专业
- 自由
添加好上述配置后，就可以安心写文章了。最后，将写好的文章放到xxx.github.io/source/_post目录下；
然后，就可在本地进行测试。在终端上定位到xxx.github.io目录下，执行 hexo s命令，后在浏览器输入http://localhost:4000/即可看到博客的效果。
可在终端输入下面的命令完成安装自动部署发布工具：
sudo npm install hexo-deployer-git –save
发布到GithubPages
当在本地确认博客效果后，就可以将md文件生成静态网页上传至GithubPages，在终端定位到xxx.github.io目录下，执行下面的命令即可：
hexo clean #清楚网页缓存
hexo g #生成静态网页
hexo d #开始部署
//当然也可以使用一次性命令：
hexo clean && hexo g && hexo d
注意：首次部署时，终端会让你输入Github的用户名和密码，按照要求填写后，稍等几分钟，就可以完后部署。
最后一步
- 在浏览器上输入http://xxx.github.io就可以看到属于你的博客了。是不是很激动，那就赶紧行动吧！
写到最后
- 以上内容，就是我对常用算法的简单总结。大家如有其他意见欢迎评论。
- 扫一扫下面的二维码，欢迎关注我的个人微信公众号攻城狮的动态（ID:iOSDevSkills），可在微信公众号进行留言，更多精彩技术文章，期待您的加入！一起讨论，一起成长！一起攻城狮！
你该有一个属于自己的个人博客了相关推荐
- 推荐一个十分好看的开源博客系统
推荐一个十分好看的开源博客系统,直接百度"里程密"地址www.lcm.wang 附图 主页 后台 浓浓的科技简约风,适合做技术的你 转载于:https://www.cnblogs. ...
- 搭建github服务器_搭建一个属于自己的公网博客
相信每一位程序员都喜欢拥有一个属于自己的博客. 当然,在我认为,内容以及模块都要自己进行可扩展定义才是真正属于自己的. 那么想要一个博客就必须要有一个服务器和一个域名,这样的话才能让自己的博文内容发扬 ...
- 一个可编辑与新增博客园文章的 Python 脚本
我的个人独立博客是基于 Hexo 搭建的,因为小站,Google 搜索引擎收录文章比较慢,还搜不到 很多人学习python,不知道从何学起. 很多人学习python,掌握了基本语法过后,不知道在哪里寻 ...
- 这是一个关于软件开发的博客。
这是一个关于软件开发的博客. 转载于:https://www.cnblogs.com/zydzyd/p/5348518.html
- 我的Serverless实战—基于Serverless搭建一个简单的WordPress个人博客图文详解-JJZ
文正在参与 "100%有奖 | 我的Serverless 实战"征稿活动 活动链接:https://marketing.csdn.net/p/15940c87f66c68188cf ...
- 手把手教你搭建一个属于自己的Ghost博客
介绍 Ghost 是基于 Node.js 的开源博客平台,由前 WordPress UI 部门主管 John O'Nolan 和 WordPress 高级工程师(女) Hannah Wolfe 创立, ...
- 不花钱，用一个小时搭建自己的博客网站
点击关注强哥,查看更多精彩文章呀 不知道大家平常有没有写博客的习惯,一般写博客都会记录什么?都会在哪里写自己的博客呢? 强哥平常就有写博客的习惯,不过没有强制自己多久写一篇,一般都是工作中遇到问题解决 ...
- 技术人如何利用 github+Jekyll ，搭建一个独立免费的技术博客
上次有人留言说,技术博客是程序员的标配,但据我所知绝大部分技术同学到现在仍然没有自己的技术博客.原因有很多,有的是懒的写,有的是怕写不好,还有的是一直想憋个大招,幻想做到完美再发出来,结果一直胎死腹中 ...
- 基于halo快速搭建一个属于你自己的博客网站
基于halo快速搭建一个属于你自己的博客网站 公众号 前置条件 JDK安装 下载halo配置文件 下载halo的启动jar 验证启动 公众号 前置条件 首先你需要有一台自己的服务器,比如你去各类云上面 ...
- 使用pelican搭建一个Jupyter Notebook数据科学博客
前言:这里是我最终搭建的博客,可以先预览看一下效果,这里是 github 地址, 欢迎 fork and star ! 写博客是一个证明你的技能,进一步加深学习和积累受众的一个非常好的方式.已经有非常 ...
最新文章
- C语言：随笔6--指针1.2
- java计数器策略模式_策略模式与外观模式 | 学步园
- linux 验证邮箱账号,linux邮件服务器的身份验证(sasl)
- 小米（MIUI）系统组招聘职位
- Magento Url重写修改
- 1月计算机会议,计算机类 | 2019年1月截稿国际会议信息8条
- WPF DataGrid 获取当前行某列值
- 【游戏】基于matlab GUI音乐时钟设计【含Matlab源码 1104期】
- 有序多分类Logistic回归（图文+数据集）【SPSS 079期】
- docker部署达梦流程记录（DM7和DM8）
- Win10系统下CUDA10.0的安装
- RedHat9上安装Oracle9i手记（原作:hotman_x)
- P1867 【Mc生存】经验值 java题解
- IEEE trans模板格式中的分栏及左下角作者信息脚注的添加方法（Word 2010）
- CMD窗口下进入PowerShell和退出PowerShell
- php中显示li,请C语言大侠们帮忙看看，为什么总显示 array subsc... html中的ul li 用php怎么做？php在html中写 代码如......
- 卸载Photoshop
- UMLChina建模竞赛第3赛季第6轮：随身老印医
- 均值滤波器类型_滤波电路的作用及四种基本类型
- 计算机技术与软件专业技术资格（水平）考试—— 软考中级 网络工程师笔记six