minor styling, containerization
This commit is contained in:
parent
18880d2e0c
commit
cc742a0e02
|
|
@ -0,0 +1 @@
|
||||||
|
FROM gatsbyjs/gatsby:onbuild
|
||||||
|
|
@ -6,6 +6,24 @@ description: Deployment of 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.
|
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.
|
||||||
|
|
||||||
# The moving parts
|
# What this is based on
|
||||||
|
|
||||||
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.
|
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
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
// custom typefaces
|
// custom typefaces
|
||||||
import "typeface-montserrat"
|
import "typeface-montserrat"
|
||||||
import "typeface-merriweather"
|
import "typeface-merriweather"
|
||||||
|
|
||||||
|
import "./src/styles/global.css";
|
||||||
|
|
|
||||||
|
|
@ -57,8 +57,7 @@ class Layout extends React.Component {
|
||||||
marginLeft: `auto`,
|
marginLeft: `auto`,
|
||||||
marginRight: `auto`,
|
marginRight: `auto`,
|
||||||
maxWidth: rhythm(24),
|
maxWidth: rhythm(24),
|
||||||
padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
|
padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`
|
||||||
backgroundColor: '#e3dcc2'
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<header>{header}</header>
|
<header>{header}</header>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
body {
|
||||||
|
background-color: '#e3dcc2'
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background-color: lightgray;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue