40 lines
3.5 KiB
Markdown
40 lines
3.5 KiB
Markdown
---
|
|
title: Deployment Reflection
|
|
date: "2020-01-21T18:04:37.149Z"
|
|
description: Technologies used for building and running the Blog
|
|
---
|
|
|
|
It took some time, but I figured as I only got around to deploy the blog just now, I could use the opportunity and just document what I'm doing. So here is a blog post describing how the blog it is hosted in is built and deployed.
|
|
|
|
# What this is based on
|
|
|
|
First, some thoughts for my requirements:
|
|
* I'm a developer. I experienced too much pain with wordpress, typo3 and similar CMSs in the past, so whatever I used for a blog had to be closer to what I feel confortable using.
|
|
* I like to write [`markdown`](https://daringfireball.net/projects/markdown/). It's a nice, human readable syntax that can be easily converted even nicer `HTML` content.
|
|
* For WebApps, I like to use [`React`](https://reactjs.org/). It's a well maintained UI-framework with clean code structure and great extensibility.
|
|
* I am kind of cheap. I run a small virtual server with limited resources. To still have reasonable performance and a clean environment I run nothing but [`Docker`](https://www.docker.com/) on it.
|
|
|
|
Some time ago I listened to [an episode of the podcast .Net rocks](https://dotnetrocks.com/?show=1638) in which I first heard about [`GatsbyJS`](https://www.gatsbyjs.org/). It's an opinionated UI-framework based on `React` and optimizes for static content and blazing fast delivery. A blog is kind of static. Sounds good, let's go for it!
|
|
|
|
# How this is built
|
|
|
|
Gatsby has a [template for blogs](https://github.com/gatsbyjs/gatsby-starter-blog). Using
|
|
```bash
|
|
npx gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
|
|
```
|
|
|
|
I let gatsby create an instance of the blog template for me. From this template I got going with `npx gatsby develop` and started off with deleting a lot of files I didn't need. I also did some changes to the style. I have absolutely no background in anything even remotely related to making things look good, so I just went with what I had in my mind at that very moment (any feedback and suggestions are very welcome). The `gatsby new` command did also initialize a [`git`]() repository so I just had to commit my new changes. For better availability I then pushed the repository to [my self-hosted git server](https://code.while-false.de/stephan/blog).
|
|
|
|
# How this is run
|
|
|
|
I mentioned `docker` before. [It seems to be officially supported](https://github.com/gatsbyjs/gatsby-docker). I just went with the documentation and tried to get it to run. First, I created a `Dockerfile` in the project with just one line of content:
|
|
```docker
|
|
FROM gatsbyjs/gatsby:onbuild
|
|
```
|
|
|
|
Then, I could build first the gatsby project with `npx gatsby build` and use the optimized output from that to build a docker image with `docker build -t while-false/blog .` from the context of my project root. Next, I started a container from the newly created image with `docker run -d --name blog -p 8080:80 while-false/blog`. It worked on my laptop for `localhost:8080`, I saw the blog I just built. Nice!
|
|
|
|
But a blog only for myself on my laptop is a bit boring. So I went on to deploy it on my server (where you are probably reading it right now). I went for the low-tech solution first: I `ssh`d into the server, cloned the git repo, built the gatsby project, built the docker image and spun it up behind my nginx reverse proxy (which I will discuss in a future blog article).
|
|
|
|
That's it for a short overview. Maybe I will show some details in the future, let me know if you have specific questions.
|