diff --git a/DOCKERFILE b/DOCKERFILE new file mode 100644 index 0000000..f6814a6 --- /dev/null +++ b/DOCKERFILE @@ -0,0 +1 @@ +FROM gatsbyjs/gatsby:onbuild \ No newline at end of file diff --git a/content/blog/deployment/index.md b/content/blog/deployment/index.md index a1bea9a..7d3a7c5 100644 --- a/content/blog/deployment/index.md +++ b/content/blog/deployment/index.md @@ -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. -# 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. diff --git a/gatsby-browser.js b/gatsby-browser.js index 466e18a..e0d3fdb 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,3 +1,5 @@ // custom typefaces import "typeface-montserrat" import "typeface-merriweather" + +import "./src/styles/global.css"; diff --git a/src/components/layout.js b/src/components/layout.js index a9bab3d..3acfeb7 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -57,8 +57,7 @@ class Layout extends React.Component { marginLeft: `auto`, marginRight: `auto`, maxWidth: rhythm(24), - padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`, - backgroundColor: '#e3dcc2' + padding: `${rhythm(1.5)} ${rhythm(3 / 4)}` }} >
{header}
diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..98a41dc --- /dev/null +++ b/src/styles/global.css @@ -0,0 +1,7 @@ +body { + background-color: '#e3dcc2' +} + +code { + background-color: lightgray; +} \ No newline at end of file