Personal blog

👨‍👩‍👧‍👦 Community 🎬 Showcases
1

I’ve been this weekend creating a frontity theme with the api rest of wordpress.com and the feeling is fantastic.

Although it is very early I would like to share the result https://personal-blog.goiblas.now.sh/
You can take a look at the code at https://github.com/goiblas/personal-blog

I have some problems like for example the image not be found when I deploy it

I would like to use sass or have control with the autoprefixer but I do not know how to customize webpack even though I understand that the problem is mine because I still do not feel comfortable with emotion, I love CSS

7 Likes
2

So cool JesĂşs! The design is simple but quite modern and beautiful. I love it :smile:

Could you please open a separate topic for each of your problems in Questions (image not deployed and autoprefixer) and we’ll answer them there?

3

Wow! Great job @jesus.designer I love it :slight_smile:

The design is really good. What are you planning to add to it? Keep us posted with the improvements.

the feeling is fantastic.

:heart_eyes:

4

Thanks for sharing your work, @jesus.designer! The blog is super fast and the design is beautiful! :heart_eyes:

We would love to share it in our newsletter. Would that be ok for you?

5

Of course! although now it’s just a proof of concept. These days I change the domain and create real content

2 Likes
6

Many thanks, JesĂşs! We are sending the newsletter tomorrow, if you change the domain before, let me know so that I can update it :slight_smile:

7

Blog updated!:partying_face:

  • Changed design
  • Domain .com
  • Real content

Next steps create more posts and create content from your own WordPress for be able to add plugins

2 Likes
8

It looks awesome, JesĂşs! :blue_heart: Keep us posted with the improvements!

Could you share the new domain here? :slight_smile:

9

@reyes => https://goiblas.com/

Amazing work @jesus.designer . It looks really beautiful.

I’d love to contribute so I’ve sent you a small PR to add transitions and save the theme mode in localStorage. I’m really bad at CSS so transitions are kind of clunky :sweat_smile:

I’ve also seen that you made an Html2React processor for the pre element. That’s awesome :clap: :clap:

For what I see, the react-syntax-highlighter library is quite big: 790kbs in the production bundle:

41
Screen Shot 2019-07-25 at 18.52.41.png3354Ă—1972 1010 KB

(by the way, you can take a look at the /build/analyze/module-production.html file after doing a production build with npx frontity build)

So it’d be an excellent opportunity for code-splitting. That means that the react-syntax-highlighter won’t be downloaded unless users happen to be in a blog post with a pre tag.

If you want, we can help you with that. And I also think it could be a good example for a guide in our docs as well.

1 Like
10

I see that you’ve configured autodeploys of Now in Github. It doesn’t make sense that you need to keep your /build folder in GitHub to make it work. Sorry about that. We need to improve the Now file/builder.

11

Thank you for collaborating and your advice is always very useful.

It would be extraordinary if it is loaded only if you are in the post, please help me with it

2 Likes
12

Hi @jesus.designer!

I’ve just opened a Pull Request with the changes needed for the code-splitting, so it just loads when a pre tag is present.

I’ll try to explain it better on Monday and work on the documentation for this, but if you have any questions don’t hesitate to tell us :blush:

1 Like
13

Actually it only loads that code when the React component is included, so only when the post has a <pre> tag.

Mario will prepare the guide next week :slight_smile:

1 Like
14

By the way, are you using Gutenberg code blocks? Why the brush: class?

15

It´s the way of WordPress .com has mark the language.
I have used Syntaxhighlighter Code block, but soon I will change to own WordPress .org

16

Ohh, I see. I didn’t know that block, only the regular Code one.

So this one outputs:

<pre class="brush: jscript;" title=""> var a = "A"; </pre>
17

Yes!

18

Oh Thx! I’m learning a lot

19

I have created a proper builder for Now. That means the npx frontity build happens on the cloud, not on your computer and you can put the build folder in your gitignore file.

I have not published it yet to npm but I’ll try to do it as soon as possible :slight_smile:

This is the repo:

20

I’ve published the version 1.0.0 of the builder: https://github.com/frontity/now-builder

Docs are updated as well: https://docs.frontity.org/installation-and-deploy/deploy-on-now

You should be able to remove all the files of your /build folder, add build to the .gitignore file so they don’t get committed to github, change the now.json file, and get new deploys each time you push code to github.

Let us know if everything works as expected.