aSuncat: Github pages搭建博客/ 个人网站的日常

比眉伴天荒 2022-02-18 18:45 249阅读 0赞

### 20190417（Wed）： ###

一、想搭个前端博客，作为长期维护的项目，希望自己技术不断进步，日常开开心心。  
二、想搭个粉色系的，对ui不怎么敏感，暂时还未定rgb，这个粉色不知道可以不可以哇。  
1、最近买了条紫灰色的阔腿裤，感觉这个紫色也挺好看的，也想用一下这个紫灰色。  
三、macos  
暂定vue + iview + nodejs + mongodb + sass，用git搭吧  
hexo  
四、1、程序。2、偶像（刘雯）+ 生活（小熊） + 植物 + 宠物

### 20190418（Thu）： ###

用惯了svn，使用git的时候特别不习惯，暂存区，develop,feature,release的管理都很不熟悉，因为版本上传出现的问题太多，就把之前的repository删除，重新建了一个，今天也终于是弄成功了，实现了将不同代码放在了我想要放置的文件夹中，还是很开心的呢

##### 项目启动init：v0.1.0 #####

一、git，mac上用的是sourceTree  
1、提交  
（1）创建develop分支：  
git工作流，创建develop分支，  
（2）develop分支上创建feature：  
git工作流，创建feature：index  
（3）暂存，并提交  
（4）合并回develop分支：  
git工作流，完成当前版本并删除分支  
（6）发布  
①创建release分支（可用来测试、q&a、bug修改)：  
git工作流，建立新的发布版本，release version：v0.1.0  
②修改文件后，完成当前版本，会提示打一个标签tag：v0.1.0，打到master分支上  
（6）推送  
2、线上bug修复  
master建立hotfix  
（1）创建hotfix分支  
master, git工作流，建立新的修复补丁，修复版本：bug\_index，  
（2）修改文件后，完成当前版本，修复补丁版本：bug\_index，此消息打标签v0.1.1

### 20190419（Fri）: ###

一、在想是自己写css，还是从hexo，jelly找模板。  
1、如果自己写css，没有设计功底，怕最后搭出来的页面不好看。  
2、最近想用iview、sass，了解到大华用的基本是iview，有关vue的ui框架也没怎么用过，所以想用来练练手。如果是找模板，基本用不到ivew。  
3、这次搭还是还自己写css吧。可能以后会再改变博客的风格。  
二、想用到粉色的樱花元素，页面背景樱花飘落，或者是鼠标点击后出现樱花再消散。  
三、ui可能会借鉴https://www.anotherhome.net  
1、他是动漫主题，我想整个萌宠主题的，就是想要的图不知道该怎么p哇，嘻嘻。  
2、捕捉到了他的hexo themes:[https://github.com/DIYgod/hexo-theme-sagiri][https_github.com_DIYgod_hexo-theme-sagiri] 。仔细想了想，我还是想搭个个人网站，而不是博客网站，我的博客会记录在csdn。  
3、自己动手写css吧，ui风格可借鉴其他博主的themes  
四、莫兰迪色，可能我可以用到哟  
五、个人主页搭完之后，可以加上这篇博客：[https://diygod.me/message/][https_diygod.me_message] ，挺吸引人的哟。

##### 项目配置setting:0.1.1 #####

一、.eslintrc.js  
rules增加下列这项，总感觉在可执行语句后面加个分号是很有必要的。嗯，所以就留着这个吧。

'semi': ['error','always'], // 语块结尾要加分号

之前还会加上下面两项，后来发现没必要，可以使用默认配置，之前function与()没有空格，现在要改变这个习惯了，主要是我懒得每次都来配置，哈哈。

'eol-last': 0, // 非空文件的末尾至少执行一个换行符
    'space-before-function-paren': 0 // function左边是否要加空格

eslint的rules可参考：[https://cloud.tencent.com/developer/chapter/12618][https_cloud.tencent.com_developer_chapter_12618]  
二、sass  
1、npm install -g cnpm --registry=https://registry.npm.taobao.org （安装淘宝镜像）：若已安装则忽略  
2、cnpm install node-sass --save （使用淘宝镜像安装node-sass）  
3、npm install --save-dev sass-loader style-loader css-loader  
4、webpack.base.config.js里添加

{
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    },

5、  
variable.scss

$highlight-color:#f00

helloWorld.vue

三、vue2.0  
1、router/ index.js部分配置：没什么特别之处，就是想看起来更清爽一点

四、模拟线上运行  
1、config/ index.js  
build中增加`port: 9000`  
2、项目根目录增加prod.server.js

var express = require('express');
    var config = require('./config/index');
    
    /*入口*/
    app.use(express.static('./dist'));
    
    /*端口号监听*/
    var port = process.env.PORT || config.build.port;
    module.exports = app.listen(port, function(err) {
      if (err) {
        console.log(err);
        return;
      }
      console.log('listening at http://localhost:' + port + '\n');
    })

3、terminal运行node prod.server.js  
4、浏览器输入localhost:9000就能看到网页了。  
五、iview引入，修改iview主题  
1、npm install iview --save  
npm install less –save  
npm install less-loader –save  
2、build/ utils.js  
`less: generateLoaders('less'),` 修改为  
`less: generateLoaders('less',{ javascriptEnabled: true }),`  
3、src新建theme/index.less

@import '~iview/src/styles/index.less';
    // Here are the variables to cover, such as:
    @primary-color: #8c0776;

4、main.js

// import 'iview/dist/styles/iview.css'; // 不更改主题
    import './theme/index.less'; // 更改主题
    import iView from 'iview';
    Vue.use(iView);

### 20190421 ###

一、iview  
报错：Parsing error: x-invalid-end-tag  
原因： iView将标签渲染为原生html标签时，由于这些标签是自闭合的，所以有end标签会报错。  
解决：eslintrc.js下的rules，加上：“vue/no-parsing-error”: \[2, \{ “x-invalid-end-tag”: false \}\]

### 20190422 ###

1、配色这玩意儿，好难。  
2、背景已经试遍了莫兰迪色。  
3、硬是学会用ps裁剪动图。  
一、vue  
1、现象：main.js引入import ‘./assets/css/index.scss’;时报错，  
terminal报错：This relative module was not found  
页面报错：Can’t resolve ‘style’ in ‘/Users/yquanmei/ee/blog/webRoot’  
BREAKING CHANGE: It’s no longer allowed to omit the ‘-loader’ suffix when using loaders.You need to specify ‘style-loader’ instead of ‘style’。  
原因：不建议使用\[“style”, “css”, “sass”\]  
解决：build/ webpack.base.conf.js中，修改sass的loader为\[“style-loader”, “css-loader”, “sass-loader”\]  
2、报错：Invalid CSS after “…load the styles”: expected 1 selector or at-rule, was “var content = requi”  
原因：（1）build/ webpack.base.conf.js中有scss相关loader

{
    	test: /\.scss$/,
    	loaders: ['style-loader', 'css-loader', 'sass-loader']
    },

（2）build/ utils.js也有相关loader

sass: generateLoaders('sass', { indentedSyntax: true }),
      scss: generateLoaders('sass'),

（3）报错是loader重复引起的。  
解决：删除build/ wepack.base.conf.js中的scss相关loader

[https_github.com_DIYgod_hexo-theme-sagiri]: https://github.com/DIYgod/hexo-theme-sagiri
[https_diygod.me_message]: https://diygod.me/message/
[https_cloud.tencent.com_developer_chapter_12618]: https://cloud.tencent.com/developer/chapter/12618