CI/CD on Time Friend

Deploying This Blog: From Push to Live

Thu, 10 Apr 2025 15:44:00 +0000

Static files need a place to live, accessible from anywhere in the world.

Platform: Cloudflare Pages

Cloudflare Pages over other platforms, three reasons:

Global CDN: edge nodes worldwide, visitors load from nearest location
Zero-config HTTPS: automatic SSL certificate issuance and renewal
Free tier: enough bandwidth and build minutes for a personal blog

Setup is simple: create a project in Cloudflare Pages dashboard, link your GitHub repo. Build commands and output directory are controlled in GitHub Actions, no need to configure in the dashboard.

How the Blog Build Pipeline Works

Wed, 05 Mar 2025 16:30:00 +0000

After writing articles, you don’t want to deploy them manually every time. The goal of automation is simple: push code and forget about it.

Two things: turn Markdown into static files and put them on the internet. Plus, automate the whole build process.

Gulp Tasks

Two Gulp tasks running in series:

gulp.task("default", gulp.series('build', 'generate-service-worker'));

build

gulp.task('build', () => gulp.src('./').pipe(shell(['hugo --buildFuture --minify'])));

One line. Runs Hugo build, --buildFuture allows future-dated content, --minify handles HTML/CSS/JS compression at build time.

Continuous Integration - Code Quality Scanning

Sun, 15 Dec 2019 23:15:00 +0000

To facilitate managing company code quality, integrating code quality scanning with continuous integration is an important step. Currently the company is relatively young, but in just one year, we’ve had close to 300 frontend projects.

With so many frontend projects, how we ensure code quality becomes a very important matter.

With too many code projects, code review is necessary. But manual code review cannot guarantee efficiency. Due to differences in individual levels and familiarity with company standards, we cannot guarantee consistent standards across all projects. Some potential bugs may also be missed.

Continuous Integration - Using GitLab CI for Frontend Project Continuous Integration

Fri, 20 Sep 2019 23:15:00 +0000

There are many continuous integration platforms on the market. Today I’ll introduce GitLab’s CI.

Starting from GitLab 8.0, GitLab CI has been integrated into GitLab.

Usage is very simple. As long as we create a .gitlab-ci.yml file in the project root directory and add a Runner, we directly integrate GitLab CI.

Integration method is very simple and convenient. Currently we put a .gitlab-ci.yml file in the front-end scaffold, and every subsequent front-end project can directly integrate GitLab CI according to standards.

Automated Deployment of Hugo, Hexo Blog with Travis CI

Tue, 20 Nov 2018 16:14:25 +0000

What is Travis CI?

Travis CI is an online hosted CI service. Using Travis for continuous integration doesn’t require setting up your own server. Most importantly, it’s free for open source projects. If company uses gitlab, it also provides corresponding continuous integration services. Won’t elaborate here.

Travis CI Configuration File

Travis requires project root directory must have a .travis.yml file.

When your repository has commits, travis will automatically execute the behaviors you configured below.

Automated Deployment Frontend Code - Using grunt-ftp-deploy

Sun, 14 Jun 2015 23:36:00 +0000

Every time after modifying code, need to deploy to remote server, my operation steps are:

Modify code –> grunt build –> Open FileZilla –> Login ftp server –> Find local folder –> Find remote server target folder –> Select all local files –> Upload

Because deploying code, at some times will be particularly frequent. Every time need to repeat the above eight operations. Want to do something, change this.

Today our protagonist: grunt-ftp-deploy

Annoying AngularJS Annotations - Using grunt-ng-annotate

Fri, 12 Jun 2015 23:15:00 +0000

Angular added dependency injection

When writing code, roughly written as follows

 app.controller('tempController', function($scope, $http, $state, $timeout) {

 ...

 })

But such code, after compression will cause a problem. Function parameters: $scope, $http, $state, $timeout will become: a,b,c,d

Causing this function cannot find services to inject, because each parameter’s naming is strictly required.

As follows:

 app.controller('tempController', function(a,b,c,d) {

 ...

 })

To solve this problem, angular supports the following writing: