Skip to content

Commit ba66903

Browse files
Capi-nemooCapi-nemoo
committed
primer post y aorganizacion
1 parent 90c0715 commit ba66903

File tree

20 files changed

+938
-15
lines changed

20 files changed

+938
-15
lines changed

‎:q

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# theme.toml template for a Hugo theme
2+
# See https://github.com/gohugoio/hugoThemes#themetoml for an example
3+
4+
name = "no-style-please"
5+
license = "MIT"
6+
licenselink = "https://github.com/Masellum/hugo-theme-nostyleplease/blob/main/LICENSE"
7+
description = "a (nearly) no-CSS, fast, minimalist Hugo theme ported from riggraz/no-style-please."
8+
homepage = "https://github.com/Masellum/hugo-theme-nostyleplease"
9+
tags = ["blog", "minimalist"]
10+
features = []
11+
min_version = "0.41.0"
12+
13+
[author]
14+
name = "Masellum"
15+
homepage = "Masellum.github.io"
16+
17+
# If porting an existing theme
18+
[original]
19+
name = "riggraz"
20+
homepage = "https://riggraz.dev/"
21+
repo = "https://github.com/riggraz/no-style-please"

‎content/en/Your-Own-Website-or-Blog-Using-Hugo.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: "Your Own Website or Blog Using Hugo Engl"
3+
date: 2024-09-12T14:14:13-05:00
4+
draft: false
5+
hidden: true
6+
---
7+
8+
*Disclaimer*: Guide for Unix-based system users only. -Windows users, no thanks.
9+
10+
# Hey buddy,
11+
12+
This is a quick guide on how to create your own website/blog. It's aimed at intermediate users, so I won't be explaining anything in detail.
13+
14+
### 1. Hugo
15+
16+
Hugo is fast, lightweight, and perfect for building websites with minimal resources. I chose it for its speed and flexibility for personal projects and portfolios. The biggest advantage I see, and what I love the most, is that you can create your own markdown templates!!! 🚀
17+
18+
### 2. Installation in ~2 Minutes
19+
20+
Installing Hugo is easy. Just run one of these commands depending on your system:
21+
22+
```bash
23+
brew install hugo # For macOS
24+
sudo apt install hugo # For Linux
25+
sudo pacman -S hugo # For Linux++
26+
```
27+
28+
### 3. Create Your Website in 1 Command
29+
30+
Start your project with this command:
31+
32+
```bash
33+
hugo new site my-website # This creates a folder (no need to put it inside another folder)
34+
```
35+
36+
### 4. Choose a Theme and Customize It
37+
38+
Pick a theme from Hugo Themes:
39+
40+
```bash
41+
git clone URL-THEME themes/ ## Copy it into the themes folder
42+
```
43+
44+
Go to Hugo Themes, select a theme, or if you're up for it, you can create your own! (I'll leave my personal recommendations at the end of the post). Customize the `config.toml` file to adjust colors, fonts, and more.
45+
46+
If you run into trouble or you're not a web developer, the only thing you need to know is:
47+
48+
- Posts go in `content/data`,
49+
- Main configuration goes in `config.toml` (root directory).
50+
51+
### 6. Deploy Easily with Netlify or GitHub Pages
52+
53+
This part was the trickiest for me 😅. Nobody really explains how to do it properly; they just say, "use GitHub Pages," and that's it. So, here's my detailed tutorial:
54+
55+
1. Buy a domain on Cloudflare (optional, but recommended).
56+
2. Go to GitHub and verify the domain in the Pages section under Settings.
57+
3. Upload the whole folder you created with Hugo to your repo on GitHub.
58+
4. Then, go to the repo's Settings and click on Pages.
59+
5. Select the root folder and branch.
60+
6. Add your custom domain.
61+
7. And we're done! Now, go to Actions in your repo, select "New workflow," search for Hugo, and that's it—you've got your new website up and running.

‎content/es/Tu-Propia-Web-o-Blog-con-Hugo.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
title: "Your Own Website or Blog Using Hugo"
3+
date: 2024-09-12T14:05:45-05:00
4+
draft: false
5+
---
6+
7+
*Disclaimer* : Guía para usuarios de Unix-based-systems.
8+
9+
[English](../posts/Your-Own-Website-or-Blog-Using-Hugo-engl.md)
10+
11+
# Hola amigazo
12+
13+
Esto es una guía rápida de cómo hacer tu propio website/blog. Está enfocada para usuarios medianamente avanzados, así que realmente no explicaré nada en detalle.
14+
15+
## 1. Hugo
16+
17+
Hugo es rápido, ligero y perfecto para crear websites con pocos recursos. Lo elegí por su velocidad y flexibilidad para proyectos personales y portafolios. La mayor ventaja que le veo, y lo que más me gusta, es que puedes hacer tu propio template de markdown!!! 🚀
18+
19+
## 2. Instalación en ~2 Minutos
20+
21+
Instalar Hugo es sencillo. Solo tienes que ejecutar uno de estos comandos dependiendo de tu sistema:
22+
23+
```bash
24+
brew install hugo # Para macOS
25+
sudo apt install hugo # Para Linux
26+
sudo pacman -S hugo # Para Linux++
27+
```
28+
29+
## 3. Crea tu Website en 1 Comando
30+
31+
Inicia tu proyecto con este comando:
32+
33+
```bash
34+
hugo new site mi-website # Esto crea una carpeta (no hace falta ponerlo dentro de otra carpeta)
35+
36+
```
37+
38+
## 4. Elige un Tema y Personalízalo
39+
40+
Escoge un tema desde Hugo Themes:
41+
42+
```bash
43+
git clone URL-TEMA themes/ ## copialo dentro de la carpeta themes
44+
```
45+
46+
Ve a Hugo Themes, selecciona un tema, o si te animas, ¡puedes crear el tuyo propio! (al final del post te dejo mis recomendaciones personales). Personaliza el archivo `config.toml` para ajustar colores, fuentes y más.
47+
48+
Si tienes problemas o no eres web developer, lo único que tienes que saber es que:
49+
50+
- En `content/data` van los posts,
51+
- En `config.toml` (directorio root) va la configuración principal del website.
52+
53+
## 5. Despliega Fácil con Netlify o GitHub Pages
54+
55+
Esta parte fue la más complicada para mí 😅. Nadie te explica cómo hacerlo bien, solo te dicen "usa GitHub Pages" y listo. Así que aquí va mi tutorial detallado:
56+
57+
1. Compra un dominio en Cloudflare (opcional, pero recomendado).
58+
2. Ve a Git y verifica el dominio en la sección de Pages dentro de Settings.
59+
3. Sube toda la carpeta que creaste con Hugo a tu repo en GitHub.
60+
4. Luego, ve a Settings del repo y cliquea Pages.
61+
5. Selecciona carpeta root y branch.
62+
6. Agrega tu custom domain.
63+
7. ¡Y ya terminamos! Ahora ve a Actions en tu repo, selecciona New workflow, busca Hugo, y listo, tienes tu nuevo website funcionando.

‎content/posts/mi-primer-post.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: "Mi Primer Post"
3+
date: 2024-09-12T12:33:18-05:00
4+
draft: true
5+
---
6+
7+
# Esta es Una prueba
8+
9+
Es para saber si typora se puede usar como editor principal para paginas de markdown con hugo (framework para hacer websites estaticos)
10+
11+
### Esto es un titulo ###.
12+
13+
## otro ##.
14+
15+
# Que tal una lista? .#
16+
17+
- hola
18+
- como
19+
- estas
20+
- tu
21+
22+
###### enumerada #######.
23+
24+
1. que
25+
2. vas
26+
3. a
27+
4. hacer
28+
5. hoy
29+
30+
vinculo: [cmamo](xdxddxdxdx)
31+

‎data/menu.toml

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,6 @@ title = "me"
1414
[[entries.entries]]
1515
title = "Texas Tech University"
1616

17-
[[entries.entries.entries]]
18-
title = "freshman"
19-
2017
[[entries.entries.entries]]
2118
title = "computer engineering"
2219

@@ -29,7 +26,7 @@ title = "me"
2926

3027
[[entries.entries.entries]]
3128
title = "email"
32-
url = "[email protected]"
29+
url = "mailto:[email protected]"
3330

3431
[[entries.entries.entries]]
3532
title = "youtube"
@@ -58,12 +55,23 @@ title = "me"
5855
title = "TerminalShare"
5956
url = "../"
6057

61-
6258
[[entries]]
63-
title = "all posts"
59+
title = "all posts"
6460

65-
[entries.post_list]
61+
[[entries.entries]]
62+
title = "English posts"
63+
[entries.entries.post_list]
6664
limit = 5
65+
section = "en"
66+
show_more = true
67+
show_more_text = "See more posts..."
68+
show_more_url = "posts"
69+
70+
[[entries.entries]]
71+
title = "espanolo posts"
72+
73+
[entries.entries.post_list]
74+
section = "es"
6775
show_more = true
68-
show_more_text = "See archive..."
76+
show_more_text = "See more posts..."
6977
show_more_url = "posts"

‎public/css/main.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/en/index.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en"><head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
3+
<meta charset="utf-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
7+
8+
<title>
9+
10+
Ens
11+
12+
</title>
13+
14+
15+
<link rel="shortcut icon" type="image/x-icon" href="/" />
16+
17+
18+
19+
<link rel="stylesheet" href="//localhost:1313/css/main.01273a70fa873b012d056499c16bb47955e0e7526c34edb73f05ca8f99f488ebc323423c6557f93f9b42a41de0448a25ce9a1ab577d0bf61e36eaf52a4979a1d.css" integrity="sha512-ASc6cPqHOwEtBWSZwWu0eVXg51JsNO23PwXKj5n0iOvDI0I8ZVf5P5tCpB3gRIolzpoatXfQv2Hjbq9SpJeaHQ==" />
20+
21+
</head>
22+
<body a="auto">
23+
<main class="page-content" aria-label="Content">
24+
<div class="w">
25+
<a href="/">..</a>
26+
27+
28+
<h1>Ens</h1>
29+
30+
31+
32+
<ul><li>
33+
<span>2024-09-12</span>
34+
<a href="//localhost:1313/en/your-own-website-or-blog-using-hugo/">Your Own Website or Blog Using Hugo Engl</a>
35+
</li>
36+
37+
</ul>
38+
39+
40+
41+
</div>
42+
</main>
43+
</body>
44+
</html>

‎public/en/index.xml

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
2+
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
3+
<channel>
4+
<title>Ens on </title>
5+
<link>//localhost:1313/en/</link>
6+
<description>Recent content in Ens on </description>
7+
<generator>Hugo</generator>
8+
<language>en</language>
9+
<lastBuildDate>Thu, 12 Sep 2024 14:14:13 -0500</lastBuildDate>
10+
<atom:link href="//localhost:1313/en/index.xml" rel="self" type="application/rss+xml" />
11+
<item>
12+
<title>Your Own Website or Blog Using Hugo Engl</title>
13+
<link>//localhost:1313/en/your-own-website-or-blog-using-hugo/</link>
14+
<pubDate>Thu, 12 Sep 2024 14:14:13 -0500</pubDate>
15+
<guid>//localhost:1313/en/your-own-website-or-blog-using-hugo/</guid>
16+
<description>&lt;p&gt;&lt;em&gt;Disclaimer&lt;/em&gt;: Guide for Unix-based system users only. -Windows users, no thanks.&lt;/p&gt;&#xA;&lt;h1 id=&#34;hey-buddy&#34;&gt;Hey buddy,&lt;/h1&gt;&#xA;&lt;p&gt;This is a quick guide on how to create your own website/blog. It&amp;rsquo;s aimed at intermediate users, so I won&amp;rsquo;t be explaining anything in detail.&lt;/p&gt;&#xA;&lt;h3 id=&#34;1-hugo&#34;&gt;1. Hugo&lt;/h3&gt;&#xA;&lt;p&gt;Hugo is fast, lightweight, and perfect for building websites with minimal resources. I chose it for its speed and flexibility for personal projects and portfolios. The biggest advantage I see, and what I love the most, is that you can create your own markdown templates!!! 🚀&lt;/p&gt;</description>
17+
</item>
18+
</channel>
19+
</rss>

‎public/en/your-own-website-or-blog-using-hugo/index.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en"><head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
3+
<meta charset="utf-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="description" content="Disclaimer: Guide for Unix-based system users only. -Windows users, no thanks.
7+
Hey buddy,
8+
This is a quick guide on how to create your own website/blog. It&rsquo;s aimed at intermediate users, so I won&rsquo;t be explaining anything in detail.
9+
1. Hugo
10+
Hugo is fast, lightweight, and perfect for building websites with minimal resources. I chose it for its speed and flexibility for personal projects and portfolios. The biggest advantage I see, and what I love the most, is that you can create your own markdown templates!!! 🚀">
11+
12+
<title>
13+
14+
Your Own Website or Blog Using Hugo Engl
15+
16+
</title>
17+
18+
19+
<link rel="shortcut icon" type="image/x-icon" href="/" />
20+
21+
22+
23+
<link rel="stylesheet" href="//localhost:1313/css/main.01273a70fa873b012d056499c16bb47955e0e7526c34edb73f05ca8f99f488ebc323423c6557f93f9b42a41de0448a25ce9a1ab577d0bf61e36eaf52a4979a1d.css" integrity="sha512-ASc6cPqHOwEtBWSZwWu0eVXg51JsNO23PwXKj5n0iOvDI0I8ZVf5P5tCpB3gRIolzpoatXfQv2Hjbq9SpJeaHQ==" />
24+
25+
</head>
26+
<body a="auto">
27+
<main class="page-content" aria-label="Content">
28+
<div class="w">
29+
<a href="/">..</a>
30+
31+
32+
<article>
33+
<p class="post-meta">
34+
<time datetime="2024-09-12 14:14:13 -0500 CDT">
35+
2024-09-12
36+
</time>
37+
</p>
38+
39+
<h1>Your Own Website or Blog Using Hugo Engl</h1>
40+
41+
42+
43+
<p><em>Disclaimer</em>: Guide for Unix-based system users only. -Windows users, no thanks.</p>
44+
<h1 id="hey-buddy">Hey buddy,</h1>
45+
<p>This is a quick guide on how to create your own website/blog. It&rsquo;s aimed at intermediate users, so I won&rsquo;t be explaining anything in detail.</p>
46+
<h3 id="1-hugo">1. Hugo</h3>
47+
<p>Hugo is fast, lightweight, and perfect for building websites with minimal resources. I chose it for its speed and flexibility for personal projects and portfolios. The biggest advantage I see, and what I love the most, is that you can create your own markdown templates!!! 🚀</p>
48+
<h3 id="2-installation-in-2-minutes">2. Installation in ~2 Minutes</h3>
49+
<p>Installing Hugo is easy. Just run one of these commands depending on your system:</p>
50+
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>brew install hugo <span style="color:#0f0"># For macOS</span>
51+
</span></span><span style="display:flex;"><span>sudo apt install hugo <span style="color:#0f0"># For Linux</span>
52+
</span></span><span style="display:flex;"><span>sudo pacman -S hugo <span style="color:#0f0"># For Linux++</span>
53+
</span></span></code></pre></div><h3 id="3-create-your-website-in-1-command">3. Create Your Website in 1 Command</h3>
54+
<p>Start your project with this command:</p>
55+
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>hugo new site my-website <span style="color:#0f0"># This creates a folder (no need to put it inside another folder)</span>
56+
</span></span></code></pre></div><h3 id="4-choose-a-theme-and-customize-it">4. Choose a Theme and Customize It</h3>
57+
<p>Pick a theme from Hugo Themes:</p>
58+
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>git clone URL-THEME themes/ <span style="color:#0f0">## Copy it into the themes folder</span>
59+
</span></span></code></pre></div><p>Go to Hugo Themes, select a theme, or if you&rsquo;re up for it, you can create your own! (I&rsquo;ll leave my personal recommendations at the end of the post). Customize the <code>config.toml</code> file to adjust colors, fonts, and more.</p>
60+
<p>If you run into trouble or you&rsquo;re not a web developer, the only thing you need to know is:</p>
61+
<ul>
62+
<li>Posts go in <code>content/data</code>,</li>
63+
<li>Main configuration goes in <code>config.toml</code> (root directory).</li>
64+
</ul>
65+
<h3 id="6-deploy-easily-with-netlify-or-github-pages">6. Deploy Easily with Netlify or GitHub Pages</h3>
66+
<p>This part was the trickiest for me 😅. Nobody really explains how to do it properly; they just say, &ldquo;use GitHub Pages,&rdquo; and that&rsquo;s it. So, here&rsquo;s my detailed tutorial:</p>
67+
<ol>
68+
<li>Buy a domain on Cloudflare (optional, but recommended).</li>
69+
<li>Go to GitHub and verify the domain in the Pages section under Settings.</li>
70+
<li>Upload the whole folder you created with Hugo to your repo on GitHub.</li>
71+
<li>Then, go to the repo&rsquo;s Settings and click on Pages.</li>
72+
<li>Select the root folder and branch.</li>
73+
<li>Add your custom domain.</li>
74+
<li>And we&rsquo;re done! Now, go to Actions in your repo, select &ldquo;New workflow,&rdquo; search for Hugo, and that&rsquo;s it—you&rsquo;ve got your new website up and running.</li>
75+
</ol>
76+
77+
</article>
78+
79+
</div>
80+
</main>
81+
</body>
82+
</html>

0 commit comments

Comments
 (0)