Compare commits
19 Commits
a4ef42777f
...
v0.1.2
| Author | SHA1 | Date | |
|---|---|---|---|
| 11a1255b32 | |||
| 77478a1df6 | |||
| 3e7a6f2ef7 | |||
| b09ab1634c | |||
| 8d0c1c6633 | |||
| c8478ffd29 | |||
| b0e438adcd | |||
| 52192aedef | |||
| d27992d1f2 | |||
| e7e54fb543 | |||
| 31b63accd4 | |||
| a688fc248c | |||
| dad601e54b | |||
| 4abc629afa | |||
| 1904e631e6 | |||
| 20769287d4 | |||
| 8bdd87b98a | |||
| 97b429fd0a | |||
| 6823f9c0c0 |
26
.woodpecker.yml
Normal file
26
.woodpecker.yml
Normal file
@ -0,0 +1,26 @@
|
||||
pipeline:
|
||||
build:
|
||||
image: jekyll/jekyll:4
|
||||
environment:
|
||||
- JEKYLL_ROOTLESS=1
|
||||
commands:
|
||||
- mkdir _site
|
||||
- jekyll build -s src/ --disable-disk-cache
|
||||
|
||||
deploy:
|
||||
image: appleboy/drone-scp
|
||||
settings:
|
||||
host:
|
||||
- www3.int.metaunix.net
|
||||
- www4.int.metaunix.net
|
||||
user: xadmin
|
||||
port: 22
|
||||
password:
|
||||
from_secret: ssh_password
|
||||
command_timeout: 2m
|
||||
target: /var/www/bitgoblin.tech
|
||||
source: ./_site/*
|
||||
rm: True
|
||||
strip_components: 1
|
||||
when:
|
||||
event: tag
|
||||
@ -1,3 +1,7 @@
|
||||
# website
|
||||
# Bit Goblin
|
||||
|
||||
Bit Goblin main website, built with Jekyll
|
||||
The Bit Goblin main website, built with Jekyll.
|
||||
|
||||
## Development
|
||||
|
||||
Assuming you have docker installed, you can simply run the script `bin/docker-watch.sh` to start the development container that will watch for changes and rebuild the site automatically.
|
||||
|
||||
@ -17,3 +17,7 @@ links:
|
||||
# Build settings
|
||||
plugins:
|
||||
- jekyll-feed
|
||||
|
||||
sass:
|
||||
sass_dir: 'assets/stylesheets'
|
||||
style: 'compressed'
|
||||
|
||||
@ -10,25 +10,27 @@
|
||||
<script src="/assets/scripts/varrock.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header id="header-box">
|
||||
<div id="header-logo">
|
||||
<h1>Bit Goblin</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div id="wrapper">
|
||||
<header id="header-box">
|
||||
<div id="header-logo">
|
||||
<h1>Bit Goblin</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav id="navigation">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/blog">Blog Posts</a></li>
|
||||
<li><a href="/contact">Contact</a></li>
|
||||
<li><a href="/sponsors">Sponsors</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav id="navigation">
|
||||
<ul>
|
||||
<li><a href="{% link index.markdown %}">Home</a></li>
|
||||
<li><a href="{% link blog.markdown %}">Blog Posts</a></li>
|
||||
<li><a href="{% link support.markdown %}">Support</a></li>
|
||||
<li><a href="{% link contact.markdown %}">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="main-content" class="container">
|
||||
<div class="row">
|
||||
<div class="columns twelve">
|
||||
{{ content }}
|
||||
<div id="main-content" class="container">
|
||||
<div class="row">
|
||||
<div class="columns twelve">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,31 +7,33 @@ layout: default
|
||||
<hr>
|
||||
|
||||
<!-- Bit Goblin YouTube channel section -->
|
||||
<div id="bitgoblin-section" class="youtube-section">
|
||||
<section id="bitgoblin-section" class="youtube-section">
|
||||
|
||||
<h3>Find Bit Goblin on <a href="{{ site.links.bitgoblin_channel }}">YouTube</a>.</h3>
|
||||
|
||||
<div class="row">
|
||||
<div class="video-card columns four"><a href="https://www.youtube.com/watch?v=kMaFYUNwE5U">
|
||||
<img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-36-thumbnail.png" alt="Let's Take a Look at Debian 10 Buster">
|
||||
<p>Let's Take a Look at Debian 10 "Buster"</p>
|
||||
</a></div>
|
||||
|
||||
<div class="video-card columns four"><a href="https://www.youtube.com/watch?v=Gm71SHuqhHI">
|
||||
<img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-6-thumbnail.png" alt="Add a Bunch of Hard Drives to Your PC! (kinda...)">
|
||||
<p>Add a Bunch of Hard Drives to Your PC! (kinda...)</p>
|
||||
<div class="video-card columns four"><a href="https://www.youtube.com/watch?v=cYSLW1qIzKE">
|
||||
<img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-46-thumbnail.png" alt="Add a Bunch of Hard Drives to Your PC! (kinda...)">
|
||||
<p>How to Install the NVIDIA Driver on Linux</p>
|
||||
</a></div>
|
||||
|
||||
<div class="video-card columns four"><a href="https://www.youtube.com/watch?v=4oCuX4xFieo">
|
||||
<img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-20-thumbnail.png" alt="How About a Cheap, Used AMD Graphics Card? (R9 270X)">
|
||||
<p>How About a Cheap, Used AMD Graphics Card? (R9 270X)</p>
|
||||
</a></div>
|
||||
|
||||
<div class="video-card columns four"><a href="https://www.youtube.com/watch?v=kMaFYUNwE5U">
|
||||
<img class="u-max-full-width" src="/assets/images/bitgoblin-thumbnails/bg-36-thumbnail.png" alt="Let's Take a Look at Debian 10 Buster">
|
||||
<p>Let's Take a Look at Debian 10 "Buster"</p>
|
||||
</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- Ascendings YouTube channel section -->
|
||||
<div id="Ascendings-section" class="youtube-section">
|
||||
<section id="Ascendings-section" class="youtube-section">
|
||||
|
||||
<h3>Like watching Old School RuneScape videos? Go watch <a href="{{ site.links.ascendings_channel }}">Ascendings</a>.</h3>
|
||||
|
||||
@ -52,7 +54,7 @@ layout: default
|
||||
</a></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
|
||||
@ -2,4 +2,7 @@
|
||||
layout: default
|
||||
---
|
||||
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p class="post-info">{{ page.date | date: "%a %b %d, %Y" }}</p>
|
||||
|
||||
{{ content }}
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
---
|
||||
layout: post
|
||||
title: "Welcome to Bit Goblin!"
|
||||
description: "There's not much else to say... welcome to Bit Goblin!"
|
||||
date: 2021-08-17 13:11:02 -0400
|
||||
categories: housekeeping
|
||||
tags: housekeeping
|
||||
---
|
||||
|
||||
There's not much else to say... welcome to Bit Goblin!
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
---
|
||||
layout: post
|
||||
title: "How This Site is Made (with Jekyll)"
|
||||
description: "These days, you can make a website MANY different ways. So I chose Jekyll..."
|
||||
date: 2022-02-19 12:31:10 -0400
|
||||
tags: web-design
|
||||
---
|
||||
|
||||
There are MANY ways to build a website these days. You have the old-school ways of hand-coding your HTML's and CSS's, to building a dynamically-generated website with new-agey tools like webpack and whatever-node-framework-is-in-right-now, and even using point-and-click tools like Wordpress or Squarespace. No matter what you want to do and your skill level, there's something for you.
|
||||
|
||||
Personally, I LOVE building websites from the ground up. Not necessarily coding everything from scratch, but at least starting from something barebones that's extensible enough so I can plug-n-play my own choice of tools to make that's tailored to me. This is why when I need to make a website, depending on the requirements I'll use frameworks like Slim (PHP), Express.js (Node.js), Gin (Go), and the like - minimalist frameworks (or routers...) that I can plug in things like templating engines, an ORM or some sort of database abstraction layer, and authentication mechanisms.
|
||||
|
||||
I also firmly believe that NOT every single website needs to be built to accept user inputs, or dynamically generate web pages on the fly; sometimes you only need a simple, static webpage or set of webpages that are small, concise, and quick to load.
|
||||
|
||||
## Introducing Jekyll ##
|
||||
|
||||
This is where static website generators come into play, and I went with [Jekyll](https://jekyllrb.com/). It's a really neat tool that combines the magic of the Liquid templating engine with the simplicity of markdown files to create a static, blog-aware site. Heck, it's so cool that it's used by GitHub! It's how they generate webpages for GitHub Pages!
|
||||
|
||||
Part of what makes Jekyll great is its extensibility. There are plugins available for things like compiling SASS/SCSS stylesheets and CoffeeScript, generating RSS feeds and sitemaps, displaying GitHub Gists, and many other things to help you in generating your site. Plus, there are community-maintained themes that can be used to give yourself a headstart with designing your site so you can focus on the content rather than the boring CSS designing junk.
|
||||
|
||||
It does require some setup to get your site scaffolding and templating setup, especially if you want to use other tools like CoffeeScript to compile your JavaScript scripts (that's me!) and want to change your templating engine. But, once you've got your site configured, creating a new blog post is as simple as creating a new markdown file in your \_posts folder, fill out the post metadata, add some content and BAM! it's ready to go.
|
||||
|
||||
Also, the developers of Jekyll were smart: they not allow you to build a site into static HTML files to serve on your site, but they also built in a tool to "watch" your source directory for changes and automatically rebuild it on the fly so you can easily see your changes as you're developing it or writing a new post.
|
||||
|
||||
## Experiences with Hugo ##
|
||||
|
||||
At this point I'd like to mention that I also really like [Hugo](https://gohugo.io), which is a static site generator in the same vein as Jekyll. It's written in Go, so it's typically a LOT faster to render sites, and it's also just a single binary so it's easier to install and maintain a single version that you build your site with.
|
||||
|
||||
Now as for why I went with Jekyll: simply just familiarity. I can go into a long debate about the pros and cons of each and talk about why Jekyll fits my use better, but realistically both are FANTASTIC tools that I'd recommend to anyone looking to build a static site. I don't need your confirmation that I made the correct choice ;).
|
||||
|
||||
## That's all for now! ##
|
||||
|
||||
Well, that's it for now. I hope you were able to learn something from this - I just wanted to talk about how I created this site with Jekyll since I'm really happy with the setup now. It's not too fancy, but isn't boring. Now the next step is integrating it with some CI to automatically deploy new versions of the site...
|
||||
BIN
src/assets/images/bitgoblin-thumbnails/bg-46-thumbnail.png
Executable file
BIN
src/assets/images/bitgoblin-thumbnails/bg-46-thumbnail.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 804 KiB |
@ -4,4 +4,15 @@
|
||||
$(window).scroll ->
|
||||
wScroll = $(this).scrollTop()
|
||||
|
||||
# Header parallax
|
||||
$('#header-logo').css('transform', 'translate(-50%, ' + (wScroll / 2) + 'px)')
|
||||
$('#header-logo h1').css('transform', 'translateY(-' + (wScroll / 2) + 'px)')
|
||||
|
||||
# YouTube section parallax
|
||||
if not (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
|
||||
$('.youtube-section').each (i, e) ->
|
||||
if wScroll >= ($(e).offset().top - $(window).height())
|
||||
offset = (Math.min(0, wScroll - $(e).offset().top + $(window).height() - 500)).toFixed()
|
||||
|
||||
$(e).find('.video-card:first-child').css('transform': 'translate(' + offset + 'px, ' + Math.abs(offset * 0.2) + 'px)')
|
||||
$(e).find('.video-card:last-child').css('transform': 'translate(' + Math.abs(offset) + 'px, ' + Math.abs(offset * 0.2) + 'px)')
|
||||
|
||||
4
src/assets/stylesheets/_variables.sass
Normal file
4
src/assets/stylesheets/_variables.sass
Normal file
@ -0,0 +1,4 @@
|
||||
$footer-height: 165px
|
||||
|
||||
$color-primary: #1e76d1
|
||||
$color-primary-hover: darken(#1e76d1, 10%)
|
||||
@ -1,28 +1,48 @@
|
||||
---
|
||||
---
|
||||
|
||||
@import "_variables"
|
||||
|
||||
body
|
||||
font-family: "Gill Sans", sans-serif
|
||||
font-size: 2rem
|
||||
margin: 0
|
||||
padding-bottom: $footer-height
|
||||
|
||||
a
|
||||
color: #1e76d1
|
||||
color: $color-primary
|
||||
font-weight: 500
|
||||
text-decoration: none
|
||||
transition: color 200ms ease-in-out
|
||||
transition: color 300ms ease-in-out
|
||||
&:hover
|
||||
color: darken(#1e76d1, 10%)
|
||||
color: $color-primary-hover
|
||||
|
||||
hr
|
||||
margin-top: 50px
|
||||
margin-bottom: 50px
|
||||
margin-top: 35px
|
||||
margin-bottom: 35px
|
||||
|
||||
.u-text-center
|
||||
text-align: center
|
||||
|
||||
.post-info
|
||||
color: #999
|
||||
font-style: italic
|
||||
|
||||
// this wrapper is only used to hide the footer
|
||||
#wrapper
|
||||
position: relative
|
||||
z-index: 10
|
||||
width: 100%
|
||||
height: 100%
|
||||
margin: 0
|
||||
padding: 0
|
||||
background: white
|
||||
|
||||
// header
|
||||
|
||||
#header-box
|
||||
position: relative
|
||||
z-index: 2
|
||||
height: 500px
|
||||
background:
|
||||
image: url(/assets/images/bg-banner.jpg)
|
||||
@ -66,31 +86,50 @@ hr
|
||||
padding: 0
|
||||
border-radius: 10px
|
||||
font-size: 3rem
|
||||
transition: background 200ms ease-in-out
|
||||
transition: all 300ms ease-in-out
|
||||
&:hover
|
||||
background: rgba(#000000, 0.1)
|
||||
margin-left: 25px
|
||||
margin-right: 25px
|
||||
transform: scale(1.1)
|
||||
a
|
||||
padding: 15px 25px
|
||||
padding: 20px 30px
|
||||
text-decoration: underline
|
||||
|
||||
#main-content
|
||||
margin-bottom: 40px
|
||||
padding-bottom: 40px
|
||||
|
||||
// home page styles
|
||||
|
||||
.youtube-section
|
||||
@media only screen and (min-device-width: 960px)
|
||||
.row
|
||||
position: relative
|
||||
.video-card:nth-child(1)
|
||||
transform: translate(100px, 20px)
|
||||
.video-card:nth-child(2)
|
||||
position: relative
|
||||
z-index: 20
|
||||
.video-card:nth-child(3)
|
||||
transform: translate(-100px, 20px)
|
||||
|
||||
.video-card a
|
||||
display: block
|
||||
margin-bottom: 25px
|
||||
padding: 15px 20px 0
|
||||
background: white
|
||||
border: 2px solid #bbb
|
||||
|
||||
img
|
||||
img, p
|
||||
transition: all 300ms ease-in-out
|
||||
|
||||
&:hover
|
||||
img
|
||||
transform: scale(1.1)
|
||||
|
||||
p
|
||||
transform: translate(20px, 10px) scale(1.1)
|
||||
|
||||
// Blog posts page
|
||||
|
||||
#post-list
|
||||
@ -103,16 +142,18 @@ hr
|
||||
.post-title
|
||||
margin-bottom: 3px
|
||||
|
||||
.post-info
|
||||
color: #999
|
||||
|
||||
.post-body
|
||||
margin-bottom: 0
|
||||
|
||||
// footer section
|
||||
|
||||
#footer
|
||||
box-sizing: border-box
|
||||
position: fixed
|
||||
z-index: -1
|
||||
bottom: 0
|
||||
width: 100%
|
||||
margin-top: 100px
|
||||
padding-top: 15px
|
||||
border-top: 2px solid #999
|
||||
height: $footer-height
|
||||
padding-top: 35px
|
||||
background: #212121
|
||||
color: white
|
||||
|
||||
@ -7,7 +7,7 @@ layout: page
|
||||
<li>
|
||||
<h5 class="post-title"><a href="{{ post.url }}">{{ post.title }}</a></h5>
|
||||
<p class="post-info">{{ post.date | date: "%a %b %d, %Y" }}</p>
|
||||
{{ post.content | truncate: 350 }}
|
||||
<p>{{ post.description }}</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
@ -3,4 +3,8 @@
|
||||
layout: home
|
||||
---
|
||||
|
||||
Welcome to the Bit Goblin website! This is a place for lots of cool tech things, ranging from YouTube videos on computer hardware, networking and Linux, to a community Minecraft server, and we even have a Discord server! Everyone is welcome to join the community, all I ask is that you simply just be excellent to each other. Easy enough.
|
||||
Welcome! My name is Greg Ballantine and Bit Goblin is my passion project for creating YouTube videos on tech. I love tinkering with all things related to computers, and I enjoy documenting the things that I do so that others can use my struggles to ease their own. Whether it's buildings PCs, playing with networking gear, or exploring the beauty of Linux, there are lots of things to play with and try to help others with.
|
||||
|
||||
Not only do I create tech videos for Bit Goblin, but I'm also trying to build a community around it for great people to just chill, have fun, and help each other out when need arises. Ranging from the aforementioned YouTube videos on computer hardware, networking and Linux, to a community Minecraft server, a Discord server for everyone to relax and chat with each other, a future community forum and other services. Everyone is welcome to join the community, all I ask is that you simply just be excellent to each other. Easy enough, right?
|
||||
|
||||
I do work with sponsors to help fund my projects. If you're curious about who I've worked with before, check out the [Sponsors page]({% link sponsors.markdown %}).
|
||||
|
||||
5
src/sponsors.markdown
Normal file
5
src/sponsors.markdown
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
layout: page
|
||||
---
|
||||
|
||||
These are the sponsors I work with...
|
||||
10
src/support.markdown
Normal file
10
src/support.markdown
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
layout: page
|
||||
---
|
||||
|
||||
Unfortunately money doesn't grow on trees, and a lot of the stuff that I purchase to make videos on can be quite expensive. My content is available free-of-charge on YouTube, but if you don't mind helping support me financially any help would be much appreciated.
|
||||
|
||||
The primary way to support my work is through donations on [my Patreon page](https://patreon.com/BitGoblin). I don't have any reward tiers over there yet, but I do plan on adding some rewards at some point in the future.
|
||||
|
||||
You can also support me by [joining Honey using my referral link](https://www.joinhoney.com/ref/9ohqcf9)! Honey helps you save money on popular websites by searching for coupons to get you discounts while you're shopping. And the best part is that it's free!
|
||||
|
||||
Reference in New Issue
Block a user