在github上优雅的搭建个人博客

前言

啊啊啊～～～,经过差不多两天的持续摸索优化，个人博客算是初步完成了，现在自己看的效果还是非常不错的。这篇文章就是讲我怎么搭建一个这样的博客的。早在17年的时候就用hexo 结合github搭建过个人博客，但是那时候还太年轻，也没有维护，后面就废掉了。18年的时候又一时兴起搭建了一个。比17年的时候好看些，但是没有什么访问量，可能没有做seo 优化，也没有维护多长时间就放着了，前几天上去看，界面显示都还正常，就是内容太幼稚了。所以时隔一年，我胡汉三又回来了。痛下决心，把整体的博客都搭建好了，包含界面渲染，RSS,评论系统，站内搜索，seo 优化等等。现在让我们开始吧。

file

 


博客传送门：
coding:http://quellanan.coding.me/

github:https://quellanan.github.io/

最终效果

我们先来看看效果吧，这样对你们可能更有吸引力，更有动力搭建一个属于自己的bolg 啦。
file

主页面是这样的，包含首页、标签、分类、归档、关于、互动、搜索、还有右侧的主页。
最喜欢标签这一页，可以看出整个网站对哪一类的文章写的比较多。

file

还可以通过标签找到对应的文章。还有就就是页脚的网站统计，页面访问人数和访问量的统计。已经整个站点博文的字数。这些相信都是自建博主们最关心的。我也是最关心这部分哈哈，毕竟访问量和人数上去了就有持续更新的动力啦。
file
打赏功能，已经版权申明，还有侧边的文章目录也是超赞的。

file
评论功能，这个评论也是很给力的吧，增加了博主和读者之间的交流。和评论类似还有一个，就是网站右下角那个类似微信图标的那个，那个也是可以直接和博主沟通的哟，不赖吧。这些只是网站的一部分功能，其他的就不说了，开始动手吧

环境准备

  1. 安装git：
    https://git-scm.com/book/zh/v2/起步-安装-Git
    安装git 之后又配置用户名和邮箱，和github 一致
#全局配置用户名
git config --global user.name "nameVal"
#全局配置邮箱
git config --global user.email "eamil@qq.com"

  1. 安装node.js：https://nodejs.org/en/
    这两个不管你linux 还是windows 都非常好安装，网上关键字搜索一下，有官方教程。

  2. 注册github登录账号：https://github.com/
    创建好和用户名一样的项目
    file

  3. 注册coding登录账号：https://coding.net/login
    也是一样的，创建一个和名称相同的项目。这里说一下为什么要用coding，其实不用也可以，coding 和github 的作用一样的，都是作为pages 以及使用他们的域名。不同的是github 是国外的，而coding 是国内的。github搭建的博客不容易被百度检索到，而coding 可以。大家可以根据个人喜好选择吧。这里我是两个都用了，反正就多一条配置。

    配置秘钥

$ cd ~
$ ssh-keygen -t rsa -C "your_email@youremail.com"

将生成的秘钥配置到github 和coding 上就好了

安装hexo

安装好git 和node 之后，安装hexo 就很方便

npm install hexo-cli -g

随后我们创建一个blog 文件夹，用来存放我们的blog.

cd blog
hexo init
npm install

这样基本的框架就已经搭建好了，可以启动看下效果

hexo clean //清缓存
hexo g //编译
hexo s  //本地运行
hexo d // 上传到github 或者coding

主题选择

在搭建好框架之后，现在当然是找一个自己喜欢的主题啦，我个人比较喜欢next ,然后就在网上找了一个next 主题，功能配置基本都有了，我就是参照这个大佬的配置过来的。

配置：https://github.com/ipyker/hexo-next-theme

将这位大佬的主题下载下来后，放到我们自己的主题中去就好了。
常见的修改按照这位大佬提示的修改就可以。

保存源码

好了，主题和框架都有了，那接下来其实写博客发布就好了，其实前面的我前两年走到这里了，所以前面没有很细的讲。但是有一些基础的人应该都可以做到，如果不行，可以通过我提到的关键字搜索也可以在网上找到详细的教程。为什么这次又要重新搭建，因为之前没有保存源码，导致github 上只存了pages 的代码。没有保存源码，所以如果源码丢了就得重新搭建了。所以这次学聪明了知道保存源码，不管是换电脑还是什么的，做号备份就不怕了。
我这里讲源码保存在github 上，我们在github项目项目上创建一个分支 save，用来保存源码。master 分支用来pages页面展示。
file
将创建的save 分支设置为默认分支。

然后在本地clone 项目。进入项目

git add .
git commit -m "your description"
git push origin save

我们 _config.yml 配置是提交到 master 分支
deploy: type: git repository: github: git@github.com:QuellanAn/QuellanAn.github.io.git coding: git@git.dev.tencent.com:quellanan/QuellanAn.git branch: master

现在开始，之后的操作就简单了。想要编译发布就
hexo clean hexo g hexo d
保存到github就

git pull 
git add .
git status
git commint -m "description"
git push origin save

我博文的源码地址：https://github.com/QuellanAn/QuellanAn.github.io
这些都是我已经配置好了，你们可以直接clone下来，进入 blog 文件夹然后进行运行修改就可以了。所以我前面都讲的比较简单。
file

SEO

现在我们博客已经建好了，我们要新增博客的话在source / _posts 目录下增加就好了。

file

但是我们现在面临的一个问题是，我们的博客没有访问量怎么办，不能通过谷歌搜索和百度搜索搜索到，而是需要直接通过输入准确的网址进行访问，这样肯定是不利于我们增加博客浏览量的。所以我们需要将我们的网址添加到百度和谷歌搜索中。

谷歌：https://search.google.com/search-console
file
将下载的html 放到public 文件夹下。
file
file
然后

hexo g
hexo d

发布到我们的网站上。然后进行验证就可以验证通过。
file
这个验证之后，我们再提交站点地图。站点地图我都配置好了，如果你们用我的模版的话，直接在网站站点地图提交就好了
file
file

这样过段时间谷歌就能搜索到你的博客啦。

file

百度提交站点：https://ziyuan.baidu.com/site/index
file
添加网站，验证方法和google 是一样的，都用html 文件验证就好了
验证完成之后，点击Robots,检测并更新。
file
我的模版里面已经配置好了。可以直接检测到。
file

虽然我做了这些，但是好像百度还没有搜录，还得再等两天再看看。
file

番外

好了，到此为止，个人博客搭建就到这这里了，大家如果也想要搭建一个自己的博客，可以把文中说的准备工作做好，然后自己下载我的源码来用，把信息修改成自己的就好了。有什么不懂了可以及时加我微信沟通。因为我模版里，我的博文原稿都在里面，所以各位用的时候记得删掉，或者记得标记为转载谢谢❤

可能讲的内容不够详细，没有细节没有讲到，对小白不太友好，但是考虑到其实网上有很多详细的教程，我这里就把我认为重要的讲了出来，希望对大家有帮助。

后续加油♡

欢迎大家关注个人公众号 "程序员爱酸奶"

分享各种学习资料，包含java，linux，大数据等。资料包含视频文档以及源码，同时分享本人及投递的优质技术博文。

如果大家喜欢记得关注和分享哟❤

 

出处：https://blog.csdn.net/qq_27790011/article/details/101776678

=======================================================================================

程序员搭个人博客，一个 GitHub 账号足矣！

引言

作为程序员拥有一个属于自己的个人技术博客，绝对是百利无一害的事，不仅方便出门装b，面试时亮出博客地址也会让面试官对你的好感度倍增。经常能在很多大佬的技术文章的文末，看到这样一句话： “欢迎大家访问我的博客”，每每看到这都会觉得好酷，同样是搞技术为啥人家那么优秀。而自己想要建一个博客，要么怕花钱，要么怕过程太麻烦，最后就不了了之。

应粉丝要求，今天手把手，嘴对嘴（放心吧，我才不稀罕亲你）的教大家搭建一个属于自己的技术博客，只要你有个github地址就行！还等啥呢？骚年，开整吧！

一、Hexo是个啥？

Hexo今天的主角，它是一款基于Node.js的静态博客（无需与后台交互，全由静态页面组成）框架，依赖少易于安装简单，更主要的是它免费啊，而且可以轻松的将生成的静态网页托管在GitHub，码云和Coding上，搭建博客首选框架之一。

二、准备工作

1、git安装

git下载地址：https://gitforwindows.org
在这里插入图片描述
安装完成后，检查git是否安装成功，如下显示即为成功。

$ git --version
git version 2.12.2.windows.2

注意： 这里建议下边使用的所有命令，均在git命令行中执行，cmd中执行命令容易出现错误。

2、node.js安装

node.js 下载地址：https://nodejs.org/en/，选择稳定版本即可，node.js的安装非常简单，一步一步next即可。
在这里插入图片描述
安装完检查node是否安装成功，如下显示即为成功。

$ node -v
v12.16.1
L8000100617811+51536@L8000100617811 MINGW64 /d/myblog
$ npm -v
6.13.4

三、Hexo 本地搭建

在你自己觉得最可爱的磁盘里，建一个文件夹专门用来存 myblog博客相关的文件。 文件夹内右键打开 Git Bash Here，在此窗口内执行以下所有命令。
在这里插入图片描述

1、安装 Hexo

用npm安装hexo，由于国内网络高“墙”深院，避免安装缓慢或失败，这里切换阿里的NPM镜像，没办法只能采用迂回战术了。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

用 cnpm 安装 hexo

$ cnpm install -g hexo-cli

安装可能有一些缓慢，当然这还是取决于你的带宽，这个过程中会出现的WARN提示不用理会。

$ cnpm install hexo --save

到这hexo就安装好了，检查一下hexo -v是否安装成功

$ hexo -v
hexo-cli: 3.1.0
os: Windows_NT 10.0.18362 win32 x64
node: 12.16.1
v8: 7.8.279.23-node.31
uv: 1.34.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.40.0
napi: 5
llhttp: 2.0.4
http_parser: 2.9.3
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1
2、初始化 Hexo

Hexo安装完以后需要进行初始化操作。

 $ hexo init

注意：这时需要在myblog文件中，创建一个新的文件夹用来存放hexo博客文件。否则执行hexo init命令会报错。
在这里插入图片描述
进入hexo文件夹内右键打开 Git Bash Here，在此窗口内执行后边的所有命令。

$ hexo init
FATAL D:\myblog not empty, please run `hexo init` on an empty folder and then copy your files into it
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: target not empty
    at Context.initConsole (C:\Users\51536\AppData\Roaming\npm\node_modules\hexo-cli\lib\console\init.js:23:27)

初始化成功后，hexo文件夹内会出现如下的文件：

node_modules: 依赖包
public：存放生成的页面
scaffolds：生成文章的一些模板
source：用来存放你的文章
themes：放下下载的主题
_config.yml: 博客的核心配置文件（设置主体、标题等属性）
在这里插入图片描述
接着需要执行一下cnpm install命令，要不下边的启动会提示命令不合法。

cnpm install

最后用 hexo s -g 命令来启动安装好的 hexo。

$ hexo s -g
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

直接访问http://localhost:4000显示如下页面，本地博客搭建成功。
在这里插入图片描述

四、Hexo 托管至 GitHub

1、创建GitHub仓库

这时候需要我们在GitHub上创建一个仓库，设置仓库的名字以XXX.github.io结尾
在这里插入图片描述

2、配置_config.yml文件

修改_config.yml文件，添加你创建的GitHub仓库地址

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

安装部署命令deploy-git ，这样你才能用命令部署到GitHub。

$ cnpm install hexo-deployer-git  --save

上边修改完毕以后，依次执行以下命令，提交本地hexo文件到GitHub。

hexo clean
hexo generate
hexo deploy
3、线上测试

访问刚创建的仓库：https://chengxy-nds.github.io/，文件推送至GitHub后页面显示会有一定的延迟，稍等几十秒再次刷新页面，看到下边这些页面就表示博客部署成功。
在这里插入图片描述

4、设置个人域名

现在我们的博客地址：https://chengxy-nds.github.io/，但是看着是不是觉得有点low，如果有钱自己可以买一个域名。在云平台随便买一个，看自己喜好，例如：chengxy.com。

将域名指向GitHub的服务器地址， 192.30.252.153 和 192.30.252.154 。

进入存放博客的GitHub仓库，点击settings，设置Custom domain，输入域名chengxy.com
在这里插入图片描述

然后在本地博客文件source中创建一个名为CNAME文件，不要后缀。写上你的域名。
在这里插入图片描述
最后重新编译上传文件，访问：chengxy.com即可。

hexo clean
hexo generate
hexo deploy

五、Hexo主题切换

虽然我们的博客搭建完成，但大家肯定也发现，现有的博客样式丑爆了，这时候就需要到官网挑一个自己喜欢的风格了。

1、下载主题

hexo主体官网：https://hexo.io/themes/，我们随便找一个主题替换演示一下，主题都托管在github上，直接clone就好。
在这里插入图片描述

2、配置_config.yml

可以看到hexo 只有一个默认的主题theme，现在进入theme文件夹执行git克隆命令，或者直接下载一个主题放入theme文件夹内都可以。

git clone https://github.com/yelog/hexo-theme-3-hexo.git

修改_config.yml文件中的theme属性

theme: hexo-theme-3-hexo

打包上传看看效果：

hexo clean
hexo generate
hexo deploy
3、测试

nice！主题已经替换成功，是比自带的好卡不少
在这里插入图片描述

六、Hexo基本操作

博客搭建完，接下来就要开始写博客，管理博客了~

创建我们的第一篇博客，会在source\_posts目录下生成一个程序员内点事的第一篇博客.md文件

hexo n 程序员内点事的第一篇博客
hexo基本配置

_config.yml是hexo框架最核心的文件，博客的配置基本在这里。

#博客名称
title: 我的博客
#副标题
subtitle: 一天进步一点
#简介
description: 记录生活点滴
#博客作者
author: John Doe
#博客语言
language: zh-CN
#时区
timezone:

#博客地址,与申请的GitHub一致
url: http://elfwalk.github.io
root: /
#博客链接格式
permalink: :year/:month/:day/:title/
permalink_defaults:

source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

default_category: uncategorized
category_map:
tag_map:

#日期格式
date_format: YYYY-MM-DD
time_format: HH:mm:ss

#分页，每页文章数量
per_page: 10
pagination_dir: page

#博客主题
theme: landscape

#发布设置
deploy: 
  type: git
  #elfwalk改为你的github用户名
  repository: https://github.com/elfwalk/elfwalk.github.io.git
  branch: master

总结

至此，我们整个hexo博客就搭建完了，其实还是比较简单的，但到这里我们万里长征也只是走了第一步，后续还有更细致的操作，例如：博客建分类、标签、布局等，让我们的博客变得美美哒！

感兴趣的小伙伴不妨关注一波呦！

小福利：

几百本各类技术电子书相送 ，嘘~，免费 送给小伙伴们。关注公众号回复【666】自行领取

 

出处：https://www.cnblogs.com/chengxy-nds/p/12631778.html

posted on 2019-10-22 21:29  jack_Meng  阅读(672)  评论(0)  编辑  收藏  举报

导航