Initial test

README.md

@@ -10,7 +10,7 @@ pinned: false
 
 # Host a Blog on HuggingFace Spaces
 
-[![Generic badge](https://img.shields.io/badge/🤗-Open%20In%20Spaces-blue.svg)](https://huggingface.co/spaces/nateraw/host-a-blog-on-huggingface-spaces)
+[![Generic badge](https://img.shields.io/badge/🤗-Open%20In%20Spaces-blue.svg)](https://huggingface.co/spaces/osanseviero/tips-and-tricks)
 
 How to host a blog on 🤗
 

app.py

@@ -39,15 +39,16 @@ def get_page_data(post_path: Path):
 
 def main():
     st.set_page_config(layout="wide")
-    posts = ['posts/hello_world.md', 'posts/check_this_out.md']
-    page_to_show = None
+    posts = ['posts/1_blog_in_spaces.md']
+    page_to_show = posts[0]
     with st.sidebar:
     
         st.markdown('''
             <div align="center">
-                <h1>A Test Blog!</h1>
+                <h1>🤗 Tips & Tricks</h1>
+                <p>Learn power user tips of things you can do at Hugging Face. Learn about latest features and more!</p>
 
-            [![Github Badge](https://img.shields.io/github/stars/nateraw/host-a-blog-on-huggingface-spaces?style=social)](https://github.com/nateraw/host-a-blog-on-huggingface-spaces)
+            [![Github Badge](https://img.shields.io/github/stars/osanseviero/hf-tips-and-tricks?style=social)](https://github.com/osanseviero/hf-tips-and-tricks)
             </div>
         ''', unsafe_allow_html=True)
         st.markdown('---')

posts/1_blog_in_spaces.md

@@ -0,0 +1,46 @@
+---
+title: T&T1 - Create interactive blog posts with Streamlit and Spaces
+description: Learn about how to host interactive blogs using Streamlit, GitHub and Spaces.
+date: 2022-01-20
+thumbnail: assets/1_huggingface_logo.png
+---
+
+# 🤗 Tips & Tricks Edition 1 
+# Create interactive blog posts with Streamlit and Spaces
+
+Welcome to the first post of the 🤗 Tips and Tricks blog! In this blog, I'll be sharing features you might not know about to leverage the Hub platform and Open Source ecosystem at its full extent. 
+
+In today's post, you'll learn how this blog was actually done! This is actually very easy and the setup takes less than 10 minutes!
+
+## Workflow
+
+I'm a strong believer that there are different tools for different jobs. The tools we'll use today are:
+
+* **Streamlit**: A very cool Open Source library that allows to build apps in Python in a very straightforward way.
+* **GitHub**: The main platform in which we're going to be doing the coding. 
+* **Hugging Face Hub**: The platform in which the demo will be hosted using [Spaces](http://hf.co/spaces/launch), a platform through which you can freely share ML demos using Streamlit, Gradio or even static sites (HTML & JavaScript if you're into that stuff).
+
+Note: this is not a fully-fledged blog platform. There won't be subscribe options, for example, but it's a cool proof of concept that can be interesting for certain interactive articles.
+
+**Sure sure...but how does it work?**
+
+So you will have a Streamlit-based application in which you'll have your articles. The code will be in GitHub, and through GitHub Action workflows, the blog will be automatically sync'ed to a Hugging Face Space.
+
+**Sounds fun, let's do it!**
+
+Cool! So Nate has built a [nice template](https://github.com/nateraw/host-a-blog-on-huggingface-spaces) we can already use out of the box. Isn't that cool? Let's begin by clicking that **Fork** button in GitHub. Nice, so you're getting ready. Let's quickly explore what we have here
+
+- **.github/workflows/**: There is a GitHub Actions workflow that will automatically sync to the Hugging Face Hub each time you push into the repo.
+- **images/**: Well...it contains images.
+* **posts/**: You can write your articles here directly with Markdown!.
+* **app.py**: This is the main application file that has the structure of the blog.
+* **packages.txt** and **requirements.txt** allow you to specify any dependencies you'll want to have installed in the blog. If you want to show some cool visualization using library X, you can add X here!
+
+**Can we get this started?**
+
+Yes, let's do it. First, create a [new Space](https://huggingface.co/new-space) at Hugging Face. You will need to specify the Streamlit SDK. Since it's still being setup, you can make it private so others don't see it. The Space can have any name you want.
+
+![Image of Spaces](assets/1_streamlit_space.png)
+
+
+The second step is to create a [write token](https://huggingface.co/settings/token). This will allow GitHub to push whenever there are changes to the Space.

posts/check_this_out.md

@@ -1,10 +0,0 @@
----
-title: A new release of blah blah
-description: Hopefully this can be really cool one day
-date: 2020-01-02
-thumbnail: images/huggingface_logo.png
----
-
-# Some cool title
-
-asdfasdf

posts/hello_world.md

@@ -1,10 +0,0 @@
----
-title: Hello World
-description: This is my first blogpost
-date: 2020-01-01
-thumbnail: images/huggingface_logo.png
----
-
-# Hello world!
-
-Welcome to my first blogpost!

requirements.txt

@@ -1 +1,2 @@
 streamlit
+pyyaml