Browse Source

add admin talks

pull/7/head
Cian Butler 4 years ago
parent
commit
d14fd0385a
4 changed files with 378 additions and 0 deletions
  1. +154
    -0
      slides/docker.html
  2. BIN
      slides/images/noCloud.png
  3. BIN
      slides/images/shippingContainers.jpg
  4. +224
    -0
      slides/static-webdesign.html

+ 154
- 0
slides/docker.html View File

@@ -0,0 +1,154 @@
<html>
<head>
<meta charset="utf-8">
<title>Docker: The Cloud in a box</title>
<link rel="stylesheet" href="../dist/css/redbrick.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? '../dist/css/pdf.css' : '../dist/css/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body data-bg-text="Pictures are being taken to be used on social media">
<div class="reveal">
<div class="slides">
<section data-markdown>
<script type='text/template'>
## Docker: The Cloud in a box
</script>
</section>
<section data-markdown>
<script type='text/template'>
## You want to get on the cloud?
</script>
</section>
<section data-markdown>
<script type='text/template'>
![There is No Cloud](../dist/images/noCloud.png)
</script>
</section>
<section>
<section data-markdown>
<script type='text/template'>
## Containers
</script>
</section>
<section data-markdown>
<script type='text/template'>
![container](../dist/images/shippingContainers.jpg)
</script>
</section>
<section data-markdown>
<script type='text/template'>
### Containers
- What is it
- How is it differnt to VM?
- LXC vs Docker
</script>
</section>
<section id="fragments">
<h3>Docker</h3>
<ul>
<li class="fragment">Well Documented</li>
<li class="fragment">Lots of tools
<ul class="fragment">
<li>Docker-compose</li>
<li>aws & google cloud</li>
</ul>
</li>
</section>
</section>
<section>
<section data-markdown>
<script type='text/template'>
# Running Docker
```
docker run --name my-nginx\
-v /etc/docker-configs/my-nginx/nginx.conf:/etc/nginx/nginx.conf:ro\
-d nginx
```
</script>
</section>
<section data-markdown>
<script type='text/template'>
### What Does this do
- Pulls from [hub.docker.com](https://hub.docker.com)
- Start the container
- Name it
- And Create Volume
</script>
</section>
<section data-markdown>
<script type='text/template'>
### What did he just say?
`docker pull`
`docker run`
Volumes
</script>
</section>
</section>
<section>
<section data-markdown>
<script type='text/template'>
### This seems complicated
<p class="fragment"> because it kind of is </p>
<h3 class="fragment"> Is there a better way? </h3>
<p class="fragment"> Yes Docker-compose </p>
</script>
</section>
<section data-markdown>
<script type='text/template'>
### Docker Compose
```
docker-compse up
```
</script>
</section>
<section data-markdown>
<script type='text/template'>
### That simple?
Not really
Lets have a look at the docker-compose.yml
</script>
</section>
<section data-markdown>
<script type='text/template'>
[github.com/redbrick/admin-training/tree/master/docker/docker-compose.yml](https://github.com/redbrick/admin-training/tree/master/docker/docker-compose.yml)
</script>
</section>
<section data-markdown>
<script type='text/template'>
### Demo
#### Lets do it live
</script>
</section>
</section>
<section data-markdown>
<script type='text/template'>
### NAH We actually prepared
guide is at [www.redbrick.dcu.ie/help/tutorials/admin-docker](https://www.redbrick.dcu.ie/help/tutorials/admin-docker)
</script>
</section>
</div>
</div>
<script src="../dist/js/reveal.js"></script>
<script src="../dist/js/head.min.js"></script>
<script>
Reveal.initialize({
controls: true,
mouseWheel: true,
dependencies: [
{ src: '../dist/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: '../dist/js/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '../dist/js/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '../dist/js/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: '../dist/js/zoom.js', async: true },
{ src: '../dist/js/notes.js', async: true }
]
});
</script>
</body>
</html>

BIN
slides/images/noCloud.png View File

Before After
Width: 600  |  Height: 442  |  Size: 429 KiB

BIN
slides/images/shippingContainers.jpg View File

Before After
Width: 700  |  Height: 467  |  Size: 320 KiB

+ 224
- 0
slides/static-webdesign.html View File

@@ -0,0 +1,224 @@
<html>
<head>
<meta charset="utf-8">
<title>Static Site</title>
<link rel="stylesheet" href="../dist/css/redbrick.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? '../dist/css/pdf.css' : '../dist/css/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body data-bg-text="Pictures are being taken to be used on social media">
<div class="reveal">
<div class="slides">
<section data-markdown>
<script type='text/template'>
# Static Site
</script>
</section>
<section data-markdown>
<script type='text/template'>
## Why
There are many [problems with cms](http://blog.theinternets.be/the-problem-with-modern-content-management-systems/) some due to security others dues to infrastructure dependency, database or running a server
Allows us to separate layout from content.
Produces HTML which is easy to host and share.
</script>
</section>
<section>
<section data-markdown>
<script type='text/template'>
## Dynamic vs static
</script>
</section>
<section data-markdown>
<script type='text/template'>
### Static Site
A static site is one that does not change once the content is set.
- plain old html site
- redbrick
</script>
</section>
<section data-markdown>
<script type='text/template'>
### Dynamic Site
A dynamic is one that is generated everytime you load it.
- wordpress
- facebook
- twitter
</script>
</section>
</section>
<section data-markdown>
<script type='text/template'>
# Hugo
Written in go, so runs on anything
Uses markdown and yaml to store setting and contents
</script>
</section>
<section>
<section data-markdown>
<script type='text/template'>
## Using Hugo
Hugo is already installed on pygmalion, so everyone just needs to ssh there to use it
``` bash
ssh username@pygmalion.redbrick.dcu.ie
```
</script>
</section>
<section data-markdown>
<script type='text/template'>
## Creating your first site
To generate your first site you can type the command:
``` bash
$ hugo new site ~/my-website
```
</script>
</section>
<section data-markdown>
<script type='text/template'>
Jump into your new site and have a look around at the files
``` bash
$ cd ~/my-website
$ ls -F
```
</script>
</section>
<section data-markdown>
<script type='text/template'>
Open up the `config.yaml` file to change the configuration of your website

``` bash
$ nano config.yaml
```
Edit the content/index.md with what ever you want to say
``` bash
$ nano content/index.md
```
</script>
</section>
</section>
<section>
<section data-markdown>
<script type='text/template'>
## Making it your own
</script>
</section>
<section data-markdown>
<script type='text/template'>
### Changing images
To get started you will want to add your own picutres for your avatar, banner and about photos. To change these you will need to add these to your `/static/img/` folder.
- avatar.jpg
- banner.jpg
- about.jpg
</script>
</section>
<section data-markdown>
<script type='text/template'>
### Customising pages
* Change the baseURL `baseURL: "http://www.redbrick.dcu.ie/~username/"` to inclue your username
* Change `title: A Redbrick users site` to the title of your main page
* You can also add your social media links in here after `link: '#'`
</script>
</section>
<section data-markdown>
<script type='text/template'>
### Adding new pages
``` bash
$ hugo new about.md
```
This will generate a new page with some metadata all ready in it
Take a look at this new file with
``` bash
$ nano content/about.md
```
</script>
</section>
</section>
<section data-markdown>
<script type='text/template'>
## Building the Site
To build your site we type the command
``` bash
$ hugo
```
This will output all the code into the `public` folder.
</script>
</section>
<section data-markdown>
<script type='text/template'>
To publish it to redbrick
``` bash
mv public/* ~/public_html
cd ~/public_html
chmod -R 755 *
chmod -r 644 *.html *.css *.html *.jpg *.png
```
</script>
</section>
<section>
<section data-markdown>
<script type='text/template'>
## Why is my static site really slow to load?
</script>
</section>
<section data-markdown>
<script type='text/template'>
### Images
Don't use high-res
scale them down and compress them
- thumbnails 200px
- banners 800px

(These are rough estimates every page is different)
Compression removes details but makes them smaller
</script>
</section>
<section data-markdown>
<script type='text/template'>
### Minification
Minification removes white spaces reducing the size of the file allowing you to load your site faster.
You can minify html, css, or js.
Tools for minification:
- Gulp
- Grunt
- Webpack
</script>
</section>
<section data-markdown>
<script type='text/template'>
## Blog
hugo can be used for a blog.
Youll need a theme that supports blog posts.
Just run `hugo new post/my-post-name.md`
</script>
</section>
</section>
<section>
<section data-markdown>
Questions?
</script>
</section>
</div>
</div>
<script src="../dist/js/reveal.js"></script>
<script src="../dist/js/head.min.js"></script>
<script>
Reveal.initialize({
controls: true,
mouseWheel: true,
dependencies: [
{ src: '../dist/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: '../dist/js/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '../dist/js/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '../dist/js/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: '../dist/js/zoom.js', async: true },
{ src: '../dist/js/notes.js', async: true }
]
});
</script>
</body>
</html>

Loading…
Cancel
Save