github一键部署_我是如何构建和部署PaperCSS的，第一周在Github上获得了125颗以上的星星...

github一键部署

by Rhyne Vlaservich

通过Rhyne Vlaservich

我是如何构建和部署PaperCSS的，第一周在Github上获得了125颗以上的星星 (How I built and deployed PaperCSS — and got 125+ stars on Github the first week)

背景 (Background)

I had just finished up a summer internship in New York working as a software engineer. During my exit interview, I asked for some feedback about any areas where I could improve. Since I’m very interested in a career in front-end web development, my main takeaway from that conversation was getting better with CSS.

我刚刚完成了在纽约的暑期实习，担任软件工程师。 在我的离职面试中，我希望获得一些关于我可以改进的领域的反馈。 由于我对从事前端Web开发的职业非常感兴趣，因此我从谈话中获得的主要收获是使用CSS变得更好。

I decided that the best way to learn CSS (and how to build it with LESS) was to create my own CSS framework. Instead of just blindly using Bootstrap, I wanted to fully understand everything under the hood. As a bonus, this CSS framework could be the basis of all of my future projects.

我认为学习CSS的最佳方法(以及如何使用LESS进行构建)是创建自己CSS框架。 我不想盲目地使用Bootstrap ，而是想全面了解幕后的一切。 另外，这个CSS框架可以作为我未来所有项目的基础。

I now knew I wanted to build a CSS framework, but I had little direction until I stumbled upon Tiffany Rayside’s Imperfect Buttons Codepen. I loved how the borders weren’t straight and how it was, well, imperfect. I thought this concept would be really cool if applied to every other type of HTML element. And so PaperCSS was born.

现在，我知道我想构建一个CSS框架，但是直到我偶然发现Tiffany Rayside的Imperfect Buttons Codepen时，我几乎没有任何指导。 我喜欢边界不是直的，边界是不完美的。 我认为，如果将这一概念应用于所有其他类型HTML元素，则将非常酷。 因此PaperCSS诞生了。

建筑用纸CSS (Building PaperCSS)

I spent the next several weeks building out classes for the framework. I started with the Flexgrid, because I really wanted to learn more about how flexbox can be used and applied. I also knew that it would be useful to have a system of positioning elements for the documentation website. I then added more features and styles as I had time.

在接下来的几周中，我为该框架建立了类。 我从Flexgrid开始，因为我真的很想了解更多有关Flexbox如何使用和应用的信息。 我还知道，为文档网站设置定位元素系统会很有用。 然后，随着时间的推移，我添加了更多功能和样式。

I spent time learning Gulp to automate building the CSS. All I had to do was add styles into a .less file and let Gulp build the CSS for me. I could then instantly view it on the documentation/demo site. I used the gulp-watch-less module so I didn’t even have to reload the site to see changes.

我花了一些时间学习Gulp来自动构建CSS。 我要做的就是将样式添加到.less文件中，然后让Gulp为我构建CSS。 然后，我可以立即在文档/演示站点上查看它。 我使用了“ 无需监视”的模块，因此甚至不必重新加载站点即可查看更改。

It was fun learning how Gulp works and playing with all of the different modules that exist for it. It feels like there’s a gulp package for anything you need.

了解Gulp的工作原理并使用它的所有不同模块，这真是一件有趣的事情。 感觉好像有一个大包装可以满足您的任何需求。

Overall, building this framework was pretty straightforward. I wanted to keep it as simple as possible so people could contribute more easily. But more on that later.

总体而言，构建此框架非常简单。 我想让它尽可能简单，以便人们可以更轻松地做出贡献。 但是稍后会更多。

部署PaperCSS (Deploying PaperCSS)

I ended up deploying the framework on Netlify. All you have to do is hook up your Git repo, your build command, and your domain name (if you have one). They even let you add https in just two clicks. I’m in love with their service (and am not being paid to say that).

我最终在Netlify上部署了该框架。 您所要做的就是连接Git存储库，构建命令和域名(如果有的话)。 他们甚至允许您单击两下添加https。 我爱上了他们的服务(不必为此付费)。

From there, any pushes to your master branch automatically trigger a rebuild and redeploy of your site.

从那里，对主分支的任何推送都会自动触发站点的重建和重新部署。

Honestly, the hardest part (so far) of this deployment has been picking the domain name. papercss.com was taken, so I had to get creative. I ended up choosing getpapercss.com, since other frameworks have put “get” before their actual name (ahem, Bootstrap). Some other options I liked were papercss.style and papercss.org.

老实说，到目前为止，此部署最困难的部分是选择域名。 papercss.com被录取了，所以我不得不发挥创造力。 我最终选择了getpapercss.com，因为其他框架将“ get”放在其实际名称之前(ahem，Bootstrap)。 我喜欢的其他一些选项是papercss.style和papercss.org。

启动PaperCSS (Launching PaperCSS)

After getting some feedback from friends and previous colleagues, I decided to share PaperCSS on the internet. I posted it to Hacker News and r/web_design. I had created this framework for web developers, so I figured that these two audiences would be ideal.

在收到朋友和以前的同事的反馈后，我决定在互联网上共享PaperCSS。 我将其发布到Hacker News和r / web_design 。 我已经为Web开发人员创建了这个框架，因此我认为这两个受众是理想的。

I did some quick research and found that the best time to post to Reddit was Sunday & Monday morning. Since my Googling took place on a Sunday night, I opted to post to these two channels on Monday morning.

我进行了一些快速研究，发现发到Reddit的最佳时间是星期天和星期一早晨 。 由于我的Google搜索是在周日晚上进行的，因此我选择在周一早上发布到这两个频道。

Hacker News got a little bit of traction, and some great feedback in the comments.

Hacker News吸引了一些关注，并在评论中提供了一些很好的反馈。

But it really took off on Reddit. Normally, when I launch a small application or Chrome extension, I get three upvotes and maybe a comment saying “meh.” But PaperCSS somehow went to the top of r/web_design and stayed in the top post position for nearly two days.

但是真的 在Reddit上起飞。 通常，当我启动一个小型应用程序或Chrome扩展程序时，我会得到3份赞成票，并可能会说“ meh”。 但是PaperCSS不知何故到达了r / web_design的顶部，并在最高职位上保持了近两天的时间。

But the best part of launching was the immediate interest in contributing. There were three pull requests by the time I opened my email that afternoon!

但是启动的最好的部分是对贡献的直接兴趣。 那天下午我打开电子邮件时，共有三个请求请求！

I suddenly felt a sense of responsibility. This was no longer some random project I could forget about and leave behind. People were interested enough to want to make it better. I felt like I owed it to them, and everyone using PaperCSS, to make sure their contributions were included. The project must live on!

我突然感到一种责任感。 这不再是我可以忘记并抛在后面的随机项目。 人们有足够的兴趣想做得更好。 我觉得我应该欠他们，以及所有使用PaperCSS的人，以确保他们的贡献也包括在内。 该项目必须继续下去！

第一周 (The first week)

Here’s the quick rundown of the first week of PaperCSS:

这是PaperCSS第一周的快速总结：

• 500+ new lines of code
  500多行新代码
• 125+ stars on Github
  Github上有125+星
• 13 issues
  13期
• 12 pull requests
  12个拉取请求
• 6 new features (tooltips, cards, alerts, badges, border styles, disabled buttons)
  6个新功能(工具提示，卡片，警报，徽章，边框样式，禁用的按钮)
• And a wealth of support and feedback!
  并有丰富的支持和反馈！

Do you want to know the craziest part about this whole thing? I’ve personally added none of those new features. It’s been a busy week, so I’ve just spent my time with PaperCSS commenting on issues and pull requests and merging them all in.

您是否想了解有关这件事的最疯狂的部分？ 我个人没有添加任何这些新功能。 这是忙碌的一周，所以我花了很多时间在PaperCSS上对问题进行评论，并拉取请求并将它们全部合并。

It’s very weird being on the other side of the pull request. Thank you to TotomInc, Fraham, and joelwallis for their contributions thus far! And thank you to everyone else for the feedback on Hacker News, Reddit, and through issues on Github.

在请求请求的另一端非常奇怪。 感谢TotomInc ， Fraham和joelwallis迄今为止所做的贡献！ 并感谢其他人对Hacker News，Reddit以及Github上的问题所提供的反馈。

PaperCSS的未来 (The future of PaperCSS)

The future of this project depends on where everyone wants to take it. I love the small community that has sprouted around it, and want it to be a framework that grows organically. I’d love to keep adding features, cleaning the code base, and letting it be a simple project that’s easy to contribute to.

这个项目的未来取决于每个人都想去哪里。 我喜欢围绕它萌芽的小社区，并希望它成为一个有机增长的框架。 我很乐意继续添加功能，清理代码库，并使其成为易于贡献的简单项目。

Some tangibles that I really want to take care of ASAP:

我真的想尽快处理一些有形的东西：

• Getting PaperCSS on a CDN. That way, users don’t need to download it — it can just be externally linked.
  在CDN上获取PaperCSS。 这样，用户无需下载它-只需将其外部链接即可。

• Getting PaperCSS onto NPM for easy-peasy npm install

  将PaperCSS放入NPM以轻松npm install

• Figuring out the best way to make sure documentation matches the latest release
  找出确保文档与最新版本匹配的最佳方法
• Adding example pages
  添加示例页面
• Breaking out the monolithic index.html file into bite-sized chunks, while still making it simple to figure out and contribute to.
  将整体式的index.html文件分成几小块，同时仍然很容易弄清楚并做出贡献。

Speaking to that last point: a lot of projects on Github are intimidating to set up locally — but PaperCSS isn’t. It’s relatively easy to understand it and add features, since the only moving parts are the .less files and the index.html file. I’d like to continue to keep it simple, and keep the barrier to entry (for contributing) low.

说到最后一点：Github上的许多项目都令人生畏地在本地设置，但PaperCSS并非如此。 相对容易理解它并添加功能，因为仅有的移动部分是.less文件和index.html文件。 我想继续保持简单，并保持准入门槛(贡献)低。

For anyone who wants to get started with an open source project, this would be a great place to do so. If you haven’t opened a pull request before, I’d be happy to walk you through that process.

对于任何想开始开源项目的人来说，这是一个不错的选择。 如果您之前没有打开过请求请求，那么我很乐意指导您完成该过程。

结论 (Conclusion)

To sum it up, it’s been a wild week. PaperCSS has surpassed my expectations by 1,000% and I’m thrilled with how it is shaping up. I’m still learning a lot about how to manage the framework and contributions, and would appreciate any advice on the matter. Also, please consider using PaperCSS for your next project, and send me a link with how it turns out :)

总结起来，这是一个疯狂的星期。 PaperCSS超出了我的预期1,000％，并且我对它的形成方式感到非常兴奋。 我仍在学习有关如何管理框架和贡献的很多知识，并希望就此提出建议。 另外，请考虑为您的下一个项目使用PaperCSS，并向我发送一个链接，说明结果:)

翻译自: https://www.freecodecamp.org/news/how-i-built-and-deployed-papercss-and-got-125-stars-on-github-the-first-week-89f8d6ac14b1/

github一键部署