roki-web

📝 The roki's website and blogs

CI	Deployment	Inspection	Quality	PR check	Docs

• Website: roki.dev
  • Tech blog: roki.dev/roki.log
  • Diary: roki.dev/roki.diary

Setup

git clone --recursive git@github.com:falgon/roki-web.git && cd roki-web
nvm install && nvm use && npm i
stack build

Usage

Building the site

stack exec site -- --help
Usage: site [--version] [--preview] [-v|--verbose] [--internal-links] COMMAND
  The static site roki.dev compiler version 0.1.0.0 powerted by Hakyll

Available options:
  -h,--help                Show this help text
  --version                Show version
  --preview                Enable a preview flag
  -v,--verbose             Run in verbose mode
  --internal-links         Check internal links only

Available commands:
  build                    Generate the site
  check                    Validate the site output
  clean                    Clean up and remove cache
  deploy                   Upload/deploy roki.dev
  rebuild                  Clean and build again
  server                   Start a preview server
  watch                    Autocompile on changes and start a preview server

stack exec site -- build --preview # fast build (This does not render KaTeX)
stack exec site -- build # release build

Scheduled posting

stack exec spa -- --help
Usage: spa [--version] COMMAND [-d|--date date] [-b|--branch-name ARG] [-y]
  The roki-web Scheduling Post Action manager 0.1.0.0

Available options:
  -h,--help                Show this help text
  --version                Show spa version information
  -d,--date date           Date to schedule (mm-dd-%H:%M)
  -b,--branch-name ARG     The name of the branch you plan to deploy
  -y                       Generate a file without checking the branch name and
                           repository name

Available commands:
  cexpr                    show crontab expression
  yaml                     generate GitHub Actions yaml from template
  clean                    clean up and remove cache

stack exec spa -- cexpr -d $(date "+%m-%d-%R") # from current time
00 15 11 09 *
stack exec spa -- yaml -d $(date "+%m-%d-%R") -b my-awesome-scheduled-post # from current time
current branch name is: draft
Are you sure you want to continue? (y/N)y
Initialising...
  Creating store...
  Creating provider...
  Running rules...
Checking for out-of-date items
Compiling
  updated tools/scheduled_post/template.yml
  updated my-awesome-scheduled-post.yml
Success
mv .github/workflows/scheduled/my-awesome-scheduled-post.yaml .github/workflows/ && rmdir .github/workflows/scheduled # apply

docker documentation is here. Generating haddock:

$ stack haddock

System overview

Overview of blog posts and website system updates

graph LR;
me((me))-->|update web site system|develop
me((me))-->|push blog contents|draft
subgraph "roki-web (public repository)"
    subgraph mf["merge flow"]
        develop-->|merge|master
    end
    mf<-."trigger (on: push)".->roki-web-actions("GitHub Actions")
    mf<-."trigger (on: push)".->gah("GitHub Actions")
    roki-web-actions-.build and deploy.->gh-pages
end
subgraph "roki-web-haddock (public repository)"
    gah-.stack haddock and deploy.->rwhgh[gh-pages]
end
subgraph "roki-web-post (private repository)"
    subgraph mf2["merge flow"]
        draft-->|merge|release
    end
    mf2<-."trigger (on: push)".->roki-web-post-actions("GitHub Actions")
    roki-web-post-actions-."push contents".->master
end
click roki-web-actions "https://github.com/falgon/roki-web/actions/workflows/build.yml?query=branch%3Amaster" "link"
click roki-web-post-actions "https://github.com/falgon/roki-web-post/actions/workflows/deploy.yml?query=branch%3Arelease" "link"
click develop "https://github.com/falgon/roki-web/tree/develop" "link"
click master "https://github.com/falgon/roki-web/tree/master" "link"
click gh-pages "https://github.com/falgon/roki-web/tree/gh-pages" "link"
click draft "https://github.com/falgon/roki-web-post/tree/draft" "link"
click release "https://github.com/falgon/roki-web-post/tree/release" "link"
click gah "https://github.com/falgon/roki-web/actions/workflows/haddock.yml" "link"
click rwhgh "https://github.com/falgon/roki-web-haddock/tree/gh-pages" "link"

Loading

• roki-web (this repository)
• roki-web-post (private repository)
• roki-web-haddock

GitHub Actions for GitHub pages has been very helpful in building this system. Thanks for it.

Overview of preview function accompanying PR

graph TD;
me((me))-->|create the PR|develop
bot((bot))-->|create the PR|develop
subgraph "roki-web (public repository)"
develop<-.trigger.->roki-web-actions("GitHub Actions")
end
roki-web-actions("GitHub Actions")-."upload the built tar".->gd[("Google Drive")]
roki-web-actions-."execute job".->circle("CircleCI")
circle-."upload".->art[("CircleCI artifact")]
circle<-."download and remove the built tar".->gd
circle-."notify complete status and artifacts url<br/>(with LINE notify and the PR comment)".->me

click develop "https://github.com/falgon/roki-web/tree/develop" "link"
click roki-web-actions "https://github.com/falgon/roki-web/actions/workflows/build_pr.yml?query=event%3Apull_request" "link"
click circle "https://app.circleci.com/pipelines/github/falgon/roki-web?branch=develop" "link"

Loading

When PR is issued, artifact is built on CircleCI as shown above and it is possible to preview. Also, the bot @kiirotori will add a comment containing the URL of the preview site and the URL of the circleci JOB log that can be displayed in the artifact.

History

This is a project for a new website that integrates the following two sites.

• Roki Profile
  • Repo: https://github.com/falgon/roki
• roki.log
  • Repo: https://bitbucket.org/r0ki/roki.log/ (private)
  • Repo (gh-page): https://github.com/falgon/roki.log

These two will be discontinued in the future and replaced by this new website and have the following characteristics.

• The website Roki Profile is deployed manually (maintained by snyk-bot)
• The blog roki.log is deployed bitbucket-pipelines

I used bitbucket, a kind of Git service that I can use private repositories for free, because github couldn't use private repositories for free before. But times have changed and now private repositories are now available for free and native CI (GitHub Actions) are also available. In this project, I use Hakyll, which is a static site generator, to manage the frontend library with node.js and have it managed with synk-bot. Deployment is done with github actions, drafts of blog posts are managed in another repository, and commits to a specific branch in that repository are triggered and pushed to this branch. This makes it possible to make open source and keep drafts private, improving and integrating the previously separated management form.

License

Licenses of this project is managed by FOSSA (you can see above "license scan" badge). For more details, you can see the dependency report of FOSSA.